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

我使用jQuery验证插件，它的工作原理是显示错误消息。但是，如果有人提交表单而未修复必填字段，表单仍会提交。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"); 
});

谢谢！

来源

2013-06-30 user2528845

有许多插件可供验证。你在用什么？ –

jquery-validation-1.11.1 我不介意切换到另一个插件。我只需要一些简单的东西，如果电子邮件地址无效或名称未填写，就会显示“请输入有效的电子邮件地址”等文字。然后它应该防止表单提交（并防止表单淡出），直到错误得到修复。（感谢您的快速回复！） – user2528845

我希望只写我自己的验证代码，说：如果名称输入字段为空，显示说'错误'的div。如果电子邮件输入字段不包含“@”符号，则显示一个说'错误'的div。否则，允许表格提交 – user2528845

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

您可以设置需要txtBox文本框的ID，并使用以下代码 -

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

来源

2013-06-30 15:57:07 Sid

谢谢！这似乎阻止了表单在未填写必填字段时被提交......但是，我的淡入，淡出不起作用。这是我的代码现在看起来像： $（function（）{ $（“＃ss-form”）。validate（）; }）; “必需的”。 $（函数（）{ 如果（$（）VAL（）== “”）{返回false;} 其他{ 回归真实; $（ '＃所需的形式'）。 fadeOut（“slow”）; } }）; – user2528845

尝试在我的答案中给出的第一个选项，淡入淡出将适用于此 – Sid

-2

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

您发布的代码有丢失的方括号，可能导致此问题。通常，jQuery验证插件不会提交无效表单。

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

来源

2013-06-30 17:46:45

这应该是一个评论，而不是一个答案。 – Dementic

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

回答

相关问题