Помочь понять как сделать проверку, когда уже есть проверка?

Question

[Darkness]

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

Есть прверка, но она все равно дает отправить форму - даже если та пуста и не прошла валидацию.
Понимаю, что нужно сделать проверку по клику.
Если у такого есть такой-то стиль ( значит не отправлять), если нет, то гуд.

Либо же, при клике на кнопку "Отправить" делать функцию валидации. Пробывал .on('click'), .click, .submit().
Но после этого даже валидация не работает.
Код на codepen: https://codepen.io/AntonBrock/pen/daNWZR?editors=1010
Спасибо за пинок!

$(document).ready(function() {
$("#email").blur(function() {
      if ($(this).val() != "") {
        var pattern = /^(?!.*@.*@.*$)(?!.*@.*\-\-.*\..*$)(?!.*@.*\-\..*$)(?!.*@.*\-$)(.*@.+(\..{1,11})?)$/;
  
        if ($(this).val() != "" && pattern.test($(this).val())) {
            
            $(this).tooltip('disable');
            $(this).removeClass("error_message");
            $(this).attr('title', '');
            $(this).attr('data-original-title', '');
          } else {
            $(this).tooltip('enable');
            $(this).attr('title', '');
            $(this).addClass("error_message");
            $(this).attr('data-original-title', 'ошибочка');
        }
      }
            if($(this).val() == "") {
               $(this).tooltip("destroy");
            }   
    });
  });

$(document).ready(function(){
  $('#kek').on('click', function () {
      if($('#email').hasClass('.error_message')) { 
      alert('hey');
      }
   });
});

$(document).ready(function() {
$('#email').on('focus', function() {
$(this).removeClass('error_message');
  });
});

$( "#email" ).keyup(function() {
  if($(this).val() === "") {
      $(this).tooltip("destroy");
}
});

Answer 1

[FeST1VaL]

Ошибка тута. Ты поставил .error_message, а не просто error_message, короче точка лишняя

if($('#email').hasClass('.error_message')) {

Comments

[Darkness]

Точно, не заметил, окей, а как тогда мне запретить отправку ? Сейчас я вывожу alert, но он все равно отправку делает

[zendor]

Darkness, preventDefault

[Darkness]

zendor,

$(document).ready(function(){
  $('#kek').on('click', function (event) {
      if($('#email').hasClass('error_message')) { 
        event.preventDefault();
      } else {
        alert ('boy');
      }
   });
});

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

[zendor]

Darkness, type="button" добавьте для кнопки (если явно не указать, то по умолчанию используется type="submit"), или вешайте обработчик на form и событие 'submit', и используйте event.preventDefault();

[Darkness]

zendor, а type зачем? Сейчас когда я добавил type, отправлятся перестала даже если правильно введен. Но alert работает, либо же codepen не показывает что отправляет (перезагружает)

[zendor]

Darkness, Обновил предыдущий ответ.

[Darkness]

zendor, Стоп. т.е. Например, у меня есть форма. где есть только маил. Также есть проверка. И также есть кнопка отправить. Мне там нужна type="submit" и обработчик на форму с событием 'submit' и event... ?
Или же я могу оставить type="button" и все будет гуд? ( отправка и тд)

[Darkness]

zendor, Да и нашел ошибку , даже пустую форму он отправляет :с оохохох

[zendor]

Darkness,

$('#dub').on('submit', function(event) {
 //stuff
});

Добавьте в условие при котором вам не нужно отправлять форму event.preventDefault()
и для кнопки type="submit" или вообще опустите атрибут, т.к. по умолчанию и так submit.

[Darkness]

zendor,

$(document).ready(function(){
  $('#dub').on('submit', function (event) {
      if($('#email').hasClass('error_message') || $('#email') == "") { 
        event.preventDefault();
      } else {
        alert ('boy');
      }
   });
});

теперь как нужно работает , пустое не пропускает, с касным тоже, с неверным тоже с верным ок

[zendor]

Darkness, Да, все так. Совсем забыл что в jQ есть сокращенный вариант для этого события:

$('#form').submit(function(event) {
  //stuff
});

submit

Answer 2

[Darkness]

Спасибо Артем Будин за указ на ошибку, по привычке как в CSS прописал и zendor за возню со мной и разжовывание инфы. Понял что лучше вешать на form , так как если на кнопку все равно будет отправляться пустая форма, но можно сделать .submit и все будет ок.
Поэтому сделал на форму, через submit и с preventDefault() для запрета отправки формы.

Готовое решение:

$(document).ready(function() {
$("#email").blur(function() { 
        if ($(this).val() != "") {
        var pattern = /^(?!.*@.*@.*$)(?!.*@.*\-\-.*\..*$)(?!.*@.*\-\..*$)(?!.*@.*\-$)(.*@.+(\..{1,11})?)$/;
  
        if ($(this).val() != "" && pattern.test($(this).val())) {
            
            $(this).tooltip('disable');
            $(this).removeClass("error_message");
            $(this).attr('title', '');
            $(this).attr('data-original-title', '');
          } else {
            $(this).tooltip('enable');
            $(this).attr('title', '');
            $(this).addClass("error_message");
            $(this).attr('data-original-title', 'ошибочка');
        }
      }
            if($(this).val() == "") {
               $(this).tooltip("destroy");
            }   
    });
  });

$(document).ready(function(){
  $('#dub').submit(function (event) {
      if($('#email').hasClass('error_message') || $('#email') == "") { 
        event.preventDefault();
      } 
   });
});

$(document).ready(function() {
$('#email').on('focus', function() {
$(this).removeClass('error_message');
  });
});

$( "#email" ).keyup(function() {
  if($(this).val() === "") {
      $(this).tooltip("destroy");
}
});

Еще раз спасибо! Понял и запомнил :)