Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 19.09.2019, 11:46
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 28

Решил задачу в 3 массива, мб кому пригодится, в итоге довольно удобно вышло
вынес в отдельный файл все функции и обработчики
$(document).ready(function(){
  $('input[type=checkbox]').val('Нет');
  $('input[type=checkbox]:checked').val('Да');
  $('input[type=checkbox]').change(function () {     
      if (this.checked) {
        this.value = 'Да';
      }
      else {
        this.value = 'Нет';
      }
  });
});

$(document).ready(function(){
  $('input[type=radio]').val('Не выбрано');
  $('input[type=radio]').click(function () {
      name = $(this).attr("name")
      label= $(this).next("label");
      radio = document.getElementsByName(name); 

      $.each(radio, function( key, value ) { 
          value.value = label.text()       
      });
  });
});


////////////////////////////////////////////////////////
////////////Функции проверки формы начало///////////////
////////////////////////////////////////////////////////
function validnot(text) {return true}

///////////Проверка заполнения телефона/////////
function validphone(text) {   
  text_val = text.val();
  var pattern1 = /^\+[\d]{1}\ \([\d]{2,3}\)\ [\d]{2,3}-[\d]{2,3}-[\d]{2,3}$/;
  var pattern2 = /^\d[\d\(\)\ -]{4,14}\d$/;
  var pattern3 = /^[\d]{10,11}$/;

  if (pattern1.test(text_val) == true) {
      $(text).removeClass("error");
      $(text).addClass("accept");
      $(text).next(".error_block").css("display","none");
  } 
  else if (pattern2.test(text_val) == true) {
      $(text).removeClass("error");
      $(text).addClass("accept");
      $(text).next(".error_block").css("display","none");
  }
  else if (pattern3.test(text_val) == true) {
      $(text).removeClass("error");
      $(text).addClass("accept");
      $(text).next(".error_block").css("display","none");
  }
  else {
      $(text).removeClass("accept");
      $(text).addClass("error");
      $(text).next(".error_block").css("display","block");
      errorcount++;
  }
}

///////////Проверка заполнения radio/////////
function validradio(text) {
    countradio = 0; 
    $.each( text, function( key, value ) {
      if ($(value).is(':checked')) {               
        countradio++;
      }
      else {}      
    });

    if (countradio > 0){
      $.each( text, function( key, value ) {
        label = $(value).next("label");
        $(label).next(".error_block").css("display","none");        
      }); 

    }
    else {
      $.each( text, function( key, value ) {
        label = $(value).next("label");        
        $(label).next(".error_block").css("display","block");
      });
      errorcount++;
    }
}

///////////Проверка Select/////////
function validselect(text) {   
  text_val = text.val();

  if (text_val == "" || text_val == " "){
    errorcount++;
  } 
  else {}
}

///////////Проверка checkbox/////////
function validcheck(text){  
  text_val = text.val(); 
  label = $(text).next("label"); 

  if (text.is(':checked')){
    $(label).next(".error_block").css("display","none");
  }
  else {
    $(label).next(".error_block").css("display","block");   
    errorcount++;
  }
}  

///////////////////// Проверка длинны текста////////////////////
function validlenght(text) {   
  text_val = text.val();
  var limit = 5; //////Максимальная длинна текста/////////
  var text_length = text_val.length;   

  if (text_val == "" || text_val == " "){
    $(text).removeClass("accept");
    $(text).addClass("error");
    $(text).next(".error_block").css("display","block");
    errorcount++;
  }
  else if (text_length > limit){
    $(text).removeClass("accept");
    $(text).addClass("error");
    $(text).next(".error_block").css("display","block");
    errorcount++;
  } 
  else {
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  }
}

///////////Проверка наличия текста/////////
function validtext(text) {   
  text_val = text.val();

  if (text_val == "" || text_val == " "){
    $(text).removeClass("accept");
    $(text).addClass("error");
    $(text).next(".error_block").css("display","block");
    errorcount++;
  } 
  else {
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  }
}

///////////Проверка наличия текста (только буквы)/////////
function validname(text) {   
  text_val = text.val();
  var pattern = /^[a-zа-яё]+$/i;

  if (pattern.test(text_val) == true) {
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  } 
  else {
    $(text).removeClass("accept");
    $(text).addClass("error");
    $(text).next(".error_block").css("display","block");
    errorcount++;   
  }
}

///////////Проверка заполнения E-mail/////////
function validmail(text) {   
  text_val = text.val();
  var pattern = /^[\w\.\d-_]+@[\w\.\d-_]+\.\w{2,4}$/i;

  if (pattern.test(text_val) == true) {
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  } 
  else {
    $(text).removeClass("accept");
    $(text).addClass("error");
    $(text).next(".error_block").css("display","block");
    errorcount++;
  }
}

/////////Проверка заполнения даты/////////
function validdate(text) {
  text_val = text.val();

  var pattern1 = /^[\d]{1,2}\/[\d]{1,2}\/[\d]{4}$/;
  var pattern2 = /^[\d]{1,2}\.[\d]{1,2}\.[\d]{4}$/;
  var pattern3 = /^[\d]{1,2}\,[\d]{1,2}\,[\d]{4}$/;
  var pattern4 = /^[\d]{1,2}\-[\d]{1,2}\-[\d]{4}$/;
  var pattern5 = /^[\d]{1,2}\\[\d]{1,2}\\[\d]{4}$/;



  if (pattern1.test(text_val) == true){       
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  }
  else if (pattern2.test(text_val) == true){       
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  }
  else if (pattern3.test(text_val) == true){       
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  }
  else if (pattern4.test(text_val) == true){ 
    $(text).removeClass("error");
    $(text).addClass("accept");
    $(text).next(".error_block").css("display","none");
  }
  else {
    $(text).removeClass("accept");
    $(text).addClass("error");
    $(text).next(".error_block").css("display","block");
    errorcount++;
  }
}
/////////////////////////////////////////////////////////
//////////////Функции проверки формы конец///////////////
/////////////////////////////////////////////////////////


function set_alerts_forms(text){
    $.each(text, function () {
    $.each(this, function (name, value) {
          var name = document.getElementsByName(name);
          alert_block = $("<p class='error_block'>"+value+"</p>");
          checklabel(name);
          function checklabel(text){      
            if($(text).next().is('label')) {
              label = $(text).next("label"); 
              $(label).after(alert_block)          
            }
            else {
              $(text).after(alert_block)
            }
          };       
        });
    });
} 

function set_valids_forms(text){
    $.each(text, function () {
        $.each(this, function (name, value) {
            var name = document.getElementsByName(name);
            $(name).change(function(){eval(value)($(name))});        
        });
    });
} 

function set_valids_onsend_forms(text){
    $.each(text, function () {
      $.each(this, function (name, value) {
          var name = document.getElementsByName(name);
          eval(value)($(name));     
      });
    });
}
function set_messege_forms(text){
    $.each(text, function () {
    $.each(this, function (name, value) {
        var name = document.getElementsByName(name);
        text_val = $(name).val();
        key = value;
        message += key +' '+ text_val +'\r\n';         
      });
    });
}


function sendform(key, validator, form_block){
  errorcount = 0;
  set_valids_onsend_forms(validator);
  if (errorcount == 0){
      message = '';  
      set_messege_forms(key);
      alert('Ваше сообщение успешно отправлено');
      alert(message);
      clearform(form_block);
  }
  else {
    return false;
  }
}

function clearform (text){
    $(text).each(function(){      
      elem = $(this).find('input[type=text],textarea');
      $.each(elem, function (name, value){ 
        value.value = '';          
      });
    });
}


function MyMailer(nameform, validators, alerts, keys){
  var this_form = document.getElementById(nameform);

  var Submit = $(this_form).find("button");
  errorcount = 0;

  set_valids_forms(validators);
  set_alerts_forms(alerts); 

  $(Submit).click(function(){
    sendform(keys, validators, alerts)
  }) 
}
Ответить с цитированием
  #12 (permalink)  
Старый 19.09.2019, 11:47
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 28

и массив + активация формы
/////////////////////////////////////////////////////////////////////////////////
///////////////////////Массивы блоков формы /////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////

var json_form1_validator = [ 
   {'family': 'validname'},
   {'name': 'validname'},
   {'phone': 'validphone'},
   {'mail': 'validmail'},
   {'date': 'validdate'},
   {'check': 'validcheck'},
   {'radio': 'validradio'},
   {'text': 'validlenght'},
   {'select': 'validselect'}
];

var json_form1_alerts = [ 
   {'family': 'Ошибка при вводе фамилии!!!'},
   {'name': 'Ошибка при вводе имени!!!'},
   {'phone': 'Ошибка при вводе телефона!!!'},
   {'mail': 'Ошибка при вводе Email!!!'},
   {'date': 'Ошибка при вводе даты!!!'},
   {'check': 'Не подтверждено!!!'},
   {'radio': 'Не выбран элемент!!!'},
   {'text': 'Поле не заполнено!!!'},
   {'select': ''}
];

var json_form1_keys = [ 
   {'family': 'Фамилия:'},
   {'name': 'Имя:'},
   {'phone': 'Телефон:'},
   {'mail': 'E-mail:'},
   {'date': 'Дата отправки:'},
   {'check': 'Check статус:'},
   {'radio': 'Пол:'},
   {'text': 'Сообщение:'},
   {'select': 'Год рождения:'}
];

$("input[name=phone]").mask('+3 (999) 999-99-99');/////////подключение маски телефона

///////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////SEND MAIL + ONLINE VALIDATION////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////Имя формы/////Массив валидации/////Массив алертов////Массив ключей////////////////
MyMailer(form1, json_form1_validator, json_form1_alerts, json_form1_keys);/////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
Ответить с цитированием
  #13 (permalink)  
Старый 19.09.2019, 12:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

Сообщение от Mikael86
Решил задачу в 3 массива, мб кому пригодится, в итоге довольно удобно вышло
Сообщение от Mikael86
массив + активация формы
Такое нагромождение костылей... Вот что значит изобретать костыли, когда уже давным давно в браузерах есть API для валидации... и главное это всё ужасно не удобно и благоприятная почва для кучи ошибок... не говоря уже о том, что нужно менять в шести местах.

Сообщение от Mikael86
... довольно удобно вышло
Удобно тогда, когда одно поле редактируется в одном месте, а не так, что нужно будет возвращаться и отгадывать где же ещё нужно поменять, чтобы оно наконец-то заработало...

А ваши clearform, функция отправки по нажатию на кнопку. Зачем заново изобретать функционал? Зачем ограничение по нажатию? Неужели нельзя просто отравлять форму любым способом? А если автозаполнение? А если голосовой ввод? Ещё есть у нативной формы такая вещь, что если нажать на Enter у правильно заполненной формы, то форма отправится. Вы это зачем-то выключили?

И зачем на каждом изменении полей вызывать eval? Это можно сделать без eval!

Очень грязное, неочевидное решение, которое всё-таки отправит форму (а это вообще форма? Если нет то это очень плохое решение!) на сервер, если JavaScript отвалится.

Сообщение от рони
может строка 129 лишняя?
Нет, вы можете захотеть сделать интерактивный вывод сообщения о неправильно заполненном поле, который зависит от того, что уже введено.
Ответить с цитированием
  #14 (permalink)  
Старый 19.09.2019, 13:45
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 28

Спасибо за то что указали на ошибки, но я учу javascript по сути неделю после основной работы, так что ошибки естественны. В данный момент это решение удовлетворяет мои потребности, в дальнейшем я наверняка перепишу всё. Но на текущем уровне развития меня хватило только на это. В любом случае ещё раз спасибо что указали на проблемы с этим кодом, и спасибо всем кто давал подсказки.

Последний раз редактировалось Mikael86, 19.09.2019 в 13:50.
Ответить с цитированием
  #15 (permalink)  
Старый 19.09.2019, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

Сообщение от Malleys
Нет, вы можете захотеть сделать интерактивный вывод сообщения о неправильно заполненном поле, который зависит от того, что уже введено.
что бы это значило? а пока, я не понимаю зачем удалять, и тут же снова создавать снова и снова, в чём преимущество с тем чтобы создать один раз и не удалять более?
Ответить с цитированием
  #16 (permalink)  
Старый 20.09.2019, 01:11
Интересующийся
Отправить личное сообщение для Mikael86 Посмотреть профиль Найти все сообщения от Mikael86
 
Регистрация: 01.02.2018
Сообщений: 28

Сообщение от рони Посмотреть сообщение
что бы это значило? а пока, я не понимаю зачем удалять, и тут же снова создавать снова и снова, в чём преимущество с тем чтобы создать один раз и не удалять более?
Я отлично понимаю что можно и нужно сделать лучше, и я бы рад создать один раз и не трогать, но в текущий момент у меня не хватает знаний.
Нет предела совершенству, вырасту по навыкам - сделаю лучше
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Promise и область видимости переменных -VenoM- Node.JS 11 11.11.2016 14:38
Область видимости переменных (this) Артем163 Общие вопросы Javascript 4 21.03.2014 13:32
Помогите пож с JSON, передача id ссылки. wisma jQuery 22 10.02.2014 13:36
Область видимости переменных positiveman Общие вопросы Javascript 3 14.01.2013 13:08
область видимости переменных в prototype (тупой вопрос)) stnw Общие вопросы Javascript 3 11.02.2011 18:25