<p>元素出现并消失错误

Question

下面的#password-error元素，fadeIn并且没有任何理由再次快速隐藏。有谁知道为什么？

$(function(){

     $('#password-error').hide();

     $('#submit').on('click', function(){
     if ($('#password').val() != $('#password2').val()){
          $('#password-error').show();
     }
     else{
          $('#password-error').hide();
     }
     });
});

Answer 1

如果#submit是表单中的按钮，则必须确保阻止表单的默认行为（表单提交）：

jQuery(function($) {
   $('#password-error').hide();
   $('#submit').on('click', function(event) {
     if ($('#password').val() != $('#password2').val()) {
       $('#password-error').show();
       event.stopPropagation(); // Stops the event to bubble to the form
     }
     else {
       $('#password-error').hide();
     }
   });
});

您可能需要考虑直接在表单上绑定侦听器 - 以确保即使用户在字段中按Enter键也会触发验证：

jQuery(function($) {
   $('#password-error').hide();
   //$(myForm).on('submit', function(event) {
   $('#submit').closest('form').on('submit', function(event) {
     if ($('#password').val() != $('#password2').val()) {
       $('#password-error').show();
       event.preventDefault(); // Prevent the default behavior of the form.
     }
     else {
       $('#password-error').hide();
     }
   });
});