jQuery 验证插件 - 如果无效，如何防止提交答案

【问题标题】：jQuery validate plugin - how to prevent submit if invalidejQuery 验证插件 - 如果无效，如何防止提交
【发布时间】：2013-06-27 20:07:13
【问题描述】：

我正在使用 jQuery 验证插件，它可以显示错误消息。但是，如果有人在未修复必填字段的情况下提交表单，则表单仍会提交。

如何告诉 jQuery 如果表单无效，它不应该提交表单或做任何其他事情（如淡出等）？

这是我的代码：

$(function(){
$("#my-form").validate();
});

$(function(){
$('form[name="required-form"]').submit(function(event){
    $('#required-form').fadeOut("slow", function () {
    $('#optional-form').fadeIn("slow");
});

相反，我想说这样的话：

$(function(){
$("#my-form").validate();
});

$(function(){
$('form[name="required-form"]').submit(function(event){
    // ONLY IF THE FORM IS VALID, ALLOW THE FORM TO SUBMIT, AND THEN CONTINUE BELOW
    $('#required-form').fadeOut("slow", function () {
    $('#optional-form').fadeIn("slow");
});

谢谢！

【问题讨论】：

有很多插件需要验证。你用的是什么？
jquery-validation-1.11.1 不过，我不介意切换到另一个插件。我只需要一些简单的东西，如果电子邮件地址无效或未填写姓名，它将显示诸如“请输入有效的电子邮件地址”之类的文本。然后它应该阻止表单提交（并防止表单淡出），直到错误得到修复。（感谢您的快速回复！）
理想情况下，我只想编写自己的验证代码：如果名称输入字段为空，则显示显示“错误”的 div。如果电子邮件输入字段不包含“@”符号，则显示一个显示“错误”的 div。否则，允许表单提交

标签： jquery forms validation submit

【解决方案1】：

使用 javascript 或 jquery 提交表单时，即使标记为必填的字段为空，也会提交表单。

您可以将所需的文本框的 id 设置为txtBox 并使用以下代码 -

$(function(){
$("#my-form").validate();
});

$(function(){
if($("#txtBox").val() != ""){
$('form[name="required-form"]').submit(function(event){
    $('#required-form').fadeOut("slow", function () {
    $('#optional-form').fadeIn("slow");
}
else{alert('Please fill in the required fields');}
});

您也可以使用表单的 onsubmit 事件，即。 <form onsubmit="return validate()"> 这样做。可以这样做-

$(function(){
$("#my-form").validate();
});

$(function(){
if($("#txtBox").val() == ""){return false;}
else{ 
return true;
//fade in and fade out here 
}
});

【讨论】：

谢谢！这似乎确实阻止了在未填写必填字段时提交表单......但是，我的淡入淡出不起作用。这就是我的代码现在的样子： $(function(){ $("#ss-form").validate(); }); $(function(){ if($(".required").val() == ""){return false;} else{ return true; $('#required-form').fadeOut("slow") ; } });
尝试我在回答中给出的第一个选项，您的淡入淡出将适用于该选项

【解决方案2】：

如果您发布您的 html 代码，问题会变得更加清晰。

您发布的代码缺少括号，这可能是造成问题的原因。通常，jQuery 验证插件不会提交无效的表单。

要显示自定义验证消息，请参阅：http://jqueryvalidation.org/reference/

【讨论】：

这应该是评论而不是答案。