Question

我刚开始学习jQuery并尝试创建自己的表单验证作为学习方法。

我想要实现的目的是，在提交表单时，它将检查具有类 .required 的任何字段是否为空，如果是，则突出显示该字段。这样可以正常工作，但是当表格填写正确时，它将无法提交。

我真的无法看到我出错的地方。如果有人能提供帮助，我们将不胜感激。

$('#contact').submit(function(event) { 

  event.preventDefault();
  var isFormValid = true;

  $('.required').each(function() {    

    if ($(this).val() == '') { 

       $(this).removeClass("valid").addClass('invalid');
       isFormValid = false;
    }

  });

  if(isFormValid = true) { 
     $('#contact').submit(); 
  }


});

Answer 1

您正尝试递归提交表单。当您调用.submit()（这会阻止实际提交）时，会再次触发相同的处理程序。

您还在if分配了标记。 if(isFormValid = true)应该使用==，但无论如何都不需要该代码。

将preventDefault移至实际失败的位置仅，不要尝试重新submit。让它落空。

$('#contact').submit(function(event) { 
  $('.required').each(function() {    
    if ($(this).val() == '') { 
       $(this).removeClass("valid").addClass('invalid');

       // only prevent submit if there is a problem
       event.preventDefault();
    }
  });
});

Answer 2

我认为第一个$（'#contact'）。submit（function（event）{...}）会覆盖$（'#contact'）。submit（），这可能会导致递归。所以试着这样做

// when user clicks submit
$('#contact').submit(function(event) { 

  // iterates through the inputs with the class 'required'
  $('.required').each(function() {    

    /**
     * we make assumption that it is a valid input.
     * because if a user probably makes a mistake in like more than one of the input 
     * but corrects one of it successfully without knowing 
     * the last other one was still wrong, it will make sense just marking that single field
     * invalid.
     **/
    $(this).addClass('valid');

    if ($(this).val() == '') { 

       // only prevents default when user input is invalid
       event.preventDefault();

       // shows which field is invalid
       $(this).removeClass("valid").addClass('invalid');

    }

  });

});

Answer 3

if（isFormValid = true）{should if if（isFormValide）{

jQuery表单验证 - 在preventDefault之后无法提交

3 个答案: