javascript - jQuery 表单验证 - 在 PreventDefault 后无法提交

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 移至实际失败的位置，并且不要尝试重新提交。就让它过去吧。

$('#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();
    }
  });
});