Jquery驗證SubmitHandler

Question

我試過尋找這個論壇和網絡尋找答案，但如果有任何他們只是告訴我做我已經嘗試過。所以，我的問題是這樣的：我有一個窗體，通過兩個驗證器，一個客戶端端jQuery和一個服務器端PHP（重力形式）運行。這一直在工作很長一段時間了。但是，我們注意到，我們收到了很多重複的提交內容，所以我想在客戶端驗證表單後禁用提交按鈕。當表單被填寫和提交後，它會運行客戶端驗證腳本，如果這些字段是有效的 - 禁用提交按鈕（以防止雙重提交） - 並將腳本發送到第二個驗證。如果任何字段無效，驗證應該返回錯誤消息，而不是禁用提交按鈕。

我周圍看了一下，最後加入這樣的：

submitHandler: function(form) { 
$(form).find(":submit").attr("disabled", true).attr("value", 
"Submitting..."); 
form.submit(); 
} 

到我的驗證腳本的末尾。

但是，這並沒有像我希望的那樣變成現實。我嘗試了上述各種不同的變體，但是當我添加它時，腳本根本不會運行，或者它只是禁用了提交按鈕（即使所有的表單字段都是無效的），這使得它不可能糾正並重新提交 - 您必須重新加載頁面以再次啓用提交按鈕。

我在做什麼錯？整個驗證腳本是這樣的：

jQuery(function() { 


var $ = jQuery; 
$(document).ready(function() { 

$('#gform_6').validate({  
rules  : { 
input_6  : { required: true, personnummer: true },   // Personnummer 
input_30  : { required: true, personnummer: true },   // Personnummer 
input_10  : { required: true, minlength: 6 },     // telenr 
"input_21.1" : { required: true },        // villkor 
"input_3.3" : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); } }, // 
"input_3.6" : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); } }, // efternamn 
input_7  : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); }, email: true }, // e-post 1 
input_31  : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); }, email: true, equalTo: "#input_6_7" }, // e-post 2 //adress  : { required: true }, // adress 
input_14  : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); } }, // lön 
input_15  : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); }, number: true, minlength: 4, maxlength: 5 }, // clearingnr 
input_16  : { required: function(element) { return (jQuery(element).parent().is(":hidden") == false); }, number: true, minlength: 7 } // kontonr 
     }, 

messages : { 
//pnummer  : "Födelsedatum ogiltigt, ska ha formatet 19770131-1234", 
input_6  : "", 
input_30  : "Födelsedatum ogiltigt, ska ha formatet 19770131-1234", 
"input_3.3" : "Du måste fylla i ditt förnamn", 
"input_3.6" : "Du måste fylla i ditt efternamn", 
input_7  : "Ej giltig e-postadress", 
input_31  : "Dina mail-adresser stämmer ej överens", 
//adress  : "Fyll i din adress", 
input_14  : "Fyll i din lön", 
input_10  : "Fyll i ditt telefonnummer", 
input_15  : "Clearingnummer måste vara 4 eller 5 siffror", 
input_16  : "Kontonummer måste vara minst 7 siffror", 
"input_21.1" : "Du måste acceptera villkoren" 
}, 


//debug  : true, 

errorClass : "form-error", 
errorElement : "span" 
//validClass : "valid", 
submitHandler: function(form) { 
$(form).find(":submit").attr("disabled", true).attr("value", 
"Submitting..."); 
form.submit(); 
} 


} 
); 

請

Answer 1

我不認爲你正在做的事情你錯了驗證代碼。問題更多的是提交表單。爲什麼不在有效提交表單之前驗證它？像這樣：

submitHandler: function(form) { 
//Validates your form 
$(form).validate(); 
//Checks if the form rules are all valid 
if($(form).valid()){ 
$(form).find(":submit").attr("disabled", true).attr("value", 
"Submitting..."); 
form.submit(); 
} 
} 

或者，您可以添加一個var來檢查您的表單上是否有提交。

<script type="text/javascript"> 
var isSubmit = false; 

$(form).submit(function(){ 
//Checks if the form has already been submitted 
if(isSubmit === false){ 
isSubmit = true; 
//Do your form submission logic here 
} 
//Just in case you don't want it to conclude 
return false; 
}); 

</script>