jQuery 表单验证 - preventDefault 后无法提交答案

【问题标题】：jQuery Form Validation - Can't Submit After preventDefaultjQuery 表单验证 - preventDefault 后无法提交
【发布时间】：2014-11-12 11:18:14
【问题描述】：

我刚刚开始学习 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(); 
  }


});

【问题讨论】：

检查值console.log(isFormValid)
您正在尝试递归地提交表单。同一个处理程序再次被击中。
TrueBlueAussie 正确回答了您的问题，但请注意，您的 if 语句中也有错误。 isFormValid = true 将始终返回 true，因为您正在重新分配值。使用 ===（或 == 当你有理由时）进行条件检查。

标签： javascript jquery forms validation

【解决方案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();
    }
  });
});

【讨论】：

示例代码中的 isFormValid 标志是多余的。
@Pieter Beulque：也是如此。现在也更正了。
那太好了，谢谢你，也帮助我了解了我哪里出错了

【解决方案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');

    }

  });

});

【讨论】：

event.preventDefault() 只有在点击联系按钮而不是提交时才会被调用。因此在这种情况下调用 .submit() 函数不会阻止默认操作。更正了比较问题
使用此解决方案，您仍然会遇到通过按键（例如 Enter）提交的问题，而不仅仅是单击。它将允许无效提交。
是的@TrueBlueAussie。多谢！刚刚纠正了
更好...我现在只剩下一种似曾相识的感觉:)

【解决方案3】：

if(isFormValid = true) { 应该是 if(isFormValide) {

【讨论】：

更干净，但没有区别，因为真正的问题是递归并且总是使用preventDefault