Как реализовать валидацию емеил?

Question

[narkesss]

Есть несколько однотипных форм с праверкой на пустоту, нужно еще сделать проверку на email через pattern, куда его всунуть ?

<form class="js-form-template">
	<div class="form-field">
		<div class="form-field-box">
		<input class="form-field-style js-valid" type="text" name="name[]" placeholder="Ваше имя">		
		<input class="form-field-style js-valid" type="text" name="phone[]" placeholder="Телефон">		
		<input class="form-field-style js-valid" type="email" name="mail[]" placeholder="E-mail">		
	        <input class="form-field-style" type="text" name="city[]" placeholder="Город">		
		<input class="hidden" type="text" name="identify[]" value="Запрос условий сотрудничества">
	</div>
	<div class="form-check partner-check">
	    <input  id="partner-check" class="form-check-box partner-check-box hide js-check" type="checkbox" name="check[]" checked>
	   <label  class="form-check-label partner-check-label" for="partner-check">Я соглашаюсь с <a class="confidencial" target="_blank" href="conf.html">политикой конфиденциальности</a></label>
   </div>
   <input class="open-btn open-btn-white partner-btn" type="submit" name="send" value="Получить условия">
</div>
</form>

$(document).ready(function() {

  function isFormValid($form) {
    var is_correct = true;
    $form.find('.js-valid').each(function(){
      if( $(this).val() =='' ) {
         $(this).addClass('errorInput');
         $(this).parent().addClass('error');
         
            is_correct = false;
        }
    });
    return is_correct;
  };
  
  function checkValid($form) {
    var iscorCheck = false;
    $form.find('.js-check').each(function(){
      if( $(this).is(':checked')) {
        iscorCheck = true; 
      };
    });
    return iscorCheck;
  };

  $(".js-form-template").submit(function(e) {
      e.preventDefault();

      $('form .js-valid').on('keyup', function(e) {
       var  valid = true;
       var $proc_form = $(this).parents('form');
        if(isFormValid($proc_form)) {
          $(this).parent().removeClass('error');
        }
        if( $(this).val() !='' ) {
          $(this).removeClass('errorInput');
        }; 
    });

    //Валидация форм
    
      var  $proc_form = $(this);
    
      if(isFormValid($proc_form) && checkValid($proc_form)) {
        showLoad();
        $.ajax({
          type: "GET",
          url: "mail.php",
          data: $(this).serialize()
          }).done(function() {
            $.fancybox.close({ src: '.js-pop' });
            hideLoad();
            $(this).find("input").val("");
            $.fancybox.open({ src: '#oky' });
            $(".js-form-template").trigger("reset");
        });
      }
      return false;
  });

});

Answer 1

[Pavel Karinin]

Засунуть нужно в функцию isFormValid, сразу после проверки "на пустоту". Можете использовать классические регулярные выражения для eMail, например такое:

^([a-z0-9]|_){1}((\-|\.|_*)?[a-z0-9]+)*@[a-z0-9]{1}((\-|\.)?[a-z0-9]+)*\.[a-z]{2,}$

Comments

[narkesss]

Как это реализовать,я новенький в вебе ,еще много не понимаю , как мне выбрать эмеил и проверить на патерн,я етот велосипед с трудом собрал.Запутался не могу саобразить.

[Pavel Karinin]

narkesss, В вашем случае, если совсем по-простому, то так:

function isFormValid($form) {
    var is_correct = true, bln, $input, input_value, email_regex = /^([a-z0-9]|_){1}((\-|\.|_*)?[a-z0-9]+)*@[a-z0-9]{1}((\-|\.)?[a-z0-9]+)*\.[a-z]{2,}$/i;
    $form.find('.js-valid').each(function(){
	$input = $(this);
      	input_value = $input.val();
        bln = true;
	if(!input_value) { bln = false }
        else{ if ($input.attr('type') == 'email' && !email_regex.test(input_value)){ bln = false } }
        if(!bln){
             $input.addClass('errorInput');
             $input.parent().addClass('error');
             is_correct = false;
        }
    });
    return is_correct;
};

[narkesss]

отправка идет при вводе 1 символа,в поле для емейла((

[Pavel Karinin]

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

[narkesss]

Pavel Karinin,
scripts.min.js:1 Uncaught TypeError: "^([a-z0-9]|_){1}((-|.|_*)?[a-z0-9]+)*@[a-z0-9]{1}((-|.)?[a-z0-9]+)*.[a-z]{2,}$".test is not a function
at HTMLInputElement. (scripts.min.js:1)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at o (scripts.min.js:1)
at HTMLFormElement. (scripts.min.js:1)
at HTMLFormElement.dispatch (jquery.min.js:3)
at HTMLFormElement.q.handle (jquery.min.js:3)

Вот что в консоли бьет , при отправке.

[Pavel Karinin]

narkesss, ааа... извините я по запарке регулярное выражение как строку написал, вот так надо:

email_regex = /^([a-z0-9]|_){1}((\-|\.|_*)?[a-z0-9]+)*@[a-z0-9]{1}((\-|\.)?[a-z0-9]+)*\.[a-z]{2,}$/i;

[narkesss]

Да да да да ...........
Павел,спасибо вам огромное...
Вы мне так помогли,вы просто не представляете .
я уже пол дня голову ломаю..
Еще раз спасибо вам...
И успехов вам .

[Pavel Karinin]

narkesss, не за что. успехов вам в обучении.

[narkesss]

Pavel Karinin, Спасибо, вам тоже.
Доброй ночи вам.

Answer 2

[Андрей]

После этой фигурной скобки

Comments

[narkesss]

А как именно ее реализовать,Что бы она отрабатывала во всех формах ?,я новичек многого ещё не знаю