jQuery驗證插件。添加新規則到現有的

Question

我有我使用jQuery驗證的項目。 這裏是我的代碼：

<script type="text/javascript" src="Scripts/jquery-1.5.1.js"></script> 
<script type="text/javascript" src="Scripts/jquery.validate.js"></script> 
<form action="/" id="MyForm" onsubmit="greeting()"> 
    <input type="checkbox" value="val1" name="dner" /> 
    <input type="submit" value="Submit" /> 
</form> 
<script type="text/javascript"> 
function greeting() { 
    return $("#MyForm").valid(); 
} 
$(document).ready(function() { 
    $("#MyForm").validate({ onsubmit: true }); //If comment this code line, it work!!! 
    $.validator.addMethod("MyFunction", function (value, element) { 
     if ($("input:checked").length > 0) { return true } else { alert("Пустое поле"); return false; } 
    }, 
    ""); 
    $("#MyForm").rules("add", { dner:{ MyFunction :true}}); 
}); 
</script> 

它的工作，當我評論的一行代碼。這是非常重要的，因爲在我的項目中我有一套新的驗證規則，我不能重新制作它。我如何將新規則添加到現有規則？

Answer 1

您的代碼：

//If comment this code line, it work!!! 
$("#MyForm").validate({ onsubmit: true }); 

如果您註釋掉整行，你會刪除初始化方法插件的！

這是一個有爭議的問題，因爲你的代碼在這兩種情況下都不起作用。請參閱here或here。

你必須糾正以下問題：

---

1）onsubmit: true已經是默認行爲，所以將其設置爲true，你打破了插件。如果您希望單擊submit按鈕時發生驗證，請保留此選項。

See documentation for onsubmit：

的onsubmit（默認值：true）：
驗證上提交表單。設置爲false以僅使用其他事件進行驗證。 設置爲一個函數來爲自己決定何時運行驗證。 布爾值true不是有效值。

---

2）您的代碼：$("#MyForm").rules("add"...。

您不應該將.rules()方法附加到form。你就只能附加到field元素...

$('input[name="dner"]').rules("add", { 
    MyFunction: true 
}); 

見documentation。

要一次將此方法應用於多個領域，使用jQuery的.each() ...

$('input[type="checkbox"]').each(function() { 
    $(this).rules("add", { 
     MyFunction: true 
    }); 
}); 

---

3）你不需要內嵌submit處理程序：onsubmit="greeting()"。使用jQuery時，內聯JavaScript是完全不必要的。此外，submit處理程序將干擾插件的內置submit處理程序。如果您在使用此插件時需要執行submit事件，請使用submitHandler回調函數...

submitHandler: function(form) { 
    // fire this code when a valid form is submitted 
    return false; // prevent default form action, e.g. when using ajax() 
} 

如果需要防火規範時，形式是無效的，使用invalidHandler回調...

invalidHandler: function(event, validator) { 
    // fire this code when an invalid form is submitted 
} 

例子可見documentation。

---

4）您的自定義方法可以濃縮...

$.validator.addMethod("MyFunction", function (value, element) { 
    return ($("input:checked").length > 0) 
}, "Пустое поле"); 

如果你想用一個alert()比label消息，你可以把後面。雖然我不建議使用alert()作爲任何現代設計的一部分。

---

DEMO與所有更改應用於：http://jsfiddle.net/sqKta/