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驗證插件 - 如何防止提交如果無效

回答

相關問題