JQuery Подтвердить плагин, если он не должен

Question

Я пытаюсь проверить свою форму, распечатав сообщение, если сообщение недействительно, если пароль не соответствует минимальным требованиям или если поля пароля и подтверждения пароля не совпадают.

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

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

Я пытался понять это в течение некоторого времени, и я ценю любые предложения.

Заранее благодарен!

JavaScript:

$('#signUpForm').validate({ // initialize the plugin 
    errorPlacement: function(error, element) {}, 
    rules: { 
     email: { 
      required: true, 
      email: true 
     } 
    } 
}); 

$('#signUpForm').submit(function(e){ 
    e.preventDefault(); 
    if($(this).valid()){ 
     $(this).submit(); 
    }else{ 
     return false; 
    }   
}); 

Форма:

<form id="signUpForm" method="post" action="signup.php"> 
    <input id="signUpEmail" name="email" class="form-control"> 
    <input id="signUpPassword" name="password" class="form-control" type="password"> 
    <input id="confirmPassword" name="confirmPassword" class="form-control" type="password"> 
</form> 

Answer 1

Эта конфигурация все неправильно ...

$('#signUpForm').validate({ // initialize the plugin 
    .... 
}); 

$('#signUpForm').submit(function(e){ 
    ....  
}); 

.submit() Ваш обработчик полностью избыточными и полностью мешая правильной работы плагина jQuery Validate, который автоматически захватывает кнопку click и блокирует событие submit.

Другими словами, код внутри вашего обработчика .submit() функционально идентичен тому, что плагин уже делает для вас. Вам это не нужно, и это нарушает проверку.

---

Ваша errorPlacment функция обратного вызова пустой, так что собирается прекратить все сообщения об ошибках отображения ...

errorPlacement: function(error, element) {}, 

---

Он должен просто выглядеть примерно так ...

$('#signUpForm').validate({ // initialize the plugin 
    rules: { 
     email: { 
      required: true, 
      email: true 
     }, 
     password: { 
      required: true, 
      minlength: 8, 
      maxlength: 12 
     }, 
     confirmPassword: { 
      equalTo: '#signUpPassword' 
     } 
    } 
}); 

ДЕМО: http://jsfiddle.net/2t7dbuuf/

---

См the documentation и SO Tag Wiki page для правильного использования.