Форум

Mikael86 · #11 (**permalink**) 19.09.2019, 11:46

вынес в отдельный файл все функции и обработчики

$(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)
  }) 
}

Mikael86 · #12 (**permalink**) 19.09.2019, 11:47

и массив + активация формы

/////////////////////////////////////////////////////////////////////////////////
///////////////////////Массивы блоков формы /////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////

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);/////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////

Malleys · #13 (**permalink**) 19.09.2019, 12:29

Сообщение от Mikael86

Решил задачу в 3 массива, мб кому пригодится, в итоге довольно удобно вышло

Сообщение от Mikael86

массив + активация формы

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

Сообщение от Mikael86

... довольно удобно вышло

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

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

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

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

Сообщение от рони

может строка 129 лишняя?

Нет, вы можете захотеть сделать интерактивный вывод сообщения о неправильно заполненном поле, который зависит от того, что уже введено.

Mikael86 · #14 (**permalink**) 19.09.2019, 13:45

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

рони · #15 (**permalink**) 19.09.2019, 19:41

Сообщение от Malleys

Нет, вы можете захотеть сделать интерактивный вывод сообщения о неправильно заполненном поле, который зависит от того, что уже введено.

что бы это значило? а пока, я не понимаю зачем удалять, и тут же снова создавать снова и снова, в чём преимущество с тем чтобы создать один раз и не удалять более?

Mikael86 · #16 (**permalink**) 20.09.2019, 01:11

Сообщение от рони

что бы это значило? а пока, я не понимаю зачем удалять, и тут же снова создавать снова и снова, в чём преимущество с тем чтобы создать один раз и не удалять более?

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

Форум

Справочник

Discord чат

Курсы javascript