Jquery驗證 - 向輸入元素添加規則時出錯？

Question

我正在嘗試使用http://docs.jquery.com/Plugins/Validation實現Jquery驗證：

我的設計方案：

• 我的輸入元素：

   <form action="submit.php" id="form_id"> <input type="text" class="val-req" id="my_input" name="myval" /> <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" /> <span id="val-msg" class="my_input"></span> </form> 

• 然后，在dom准備好了：

    $(document).ready(function() { $('.val-req').rules('add', {required:true}); }); 

• 驗證方法：

    function validate_form(form_id, callback) { var form = $('#'+form_id); $('.val-req').each(function() {$(this).rules('add', {required:true});}); $(form).validate({ errorElement: "span", errorClass: "val-error", validClass: "val-valid", errorPlacement: function(error, element) { $('#val-msg.'+$(element).attr('id')).innerHTML(error.html()); }, submitHandler: callback }); } 

根據我的預期，它應該在表單中的占位符跨度中顯示錯誤消息。

但是， 問題

Chrome-Console出錯 ：未捕獲TypeError：無法讀取未定義的屬性“設置”

它也在其他瀏覽器上出錯。 然后，我試圖弄清楚問題並發現：

 $('.val-req').rules('add', {required:true});   # This is causing the error

根據我的理解和文檔 - >這應該是正確的。

為什么會導致TypeError，我該怎么辦才能解決它？

Answer 1

在表單元素中調用validate插件后，您必須添加規則：

$("form").validate()
$(yourElement).rules("add", {...})

Answer 2

我認為你的代碼比它需要的更復雜。 您應該只需要在文檔就緒時調用validate （假設您的表單存在於文檔就緒）：

$(document).ready(function() {
    $(".val-req").addClass("required");
    $("#form_id").validate({
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});​

示例： http ： //jsfiddle.net/4vDGM/

你也可以只添加一個類的required所需元素，而不是通過JavaScript添加。

您可以做的另一件事是在validate的選項的規則對象中添加規則：

$(document).ready(function() {
    $("#form_id").validate({
        rules: {
            myval: "required"
        },
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});​

示例： http ： //jsfiddle.net/GsXnJ/

Answer 3

我試圖在已經設置驗證的表單上修改規則，但我發現我的$（document）.ready（...）代碼在主表單驗證設置之前執行，所以添加一個簡短的setTimeout為我解決了這個問題 - 例如

setTimeout(function() {
    $(yourElement).rules("add", {...})
}, 100);

Answer 4

罪魁禍首是方法delegate（），它不檢查驗證器是否存在：

function delegate(event) {
  var validator = $.data(this[0].form, "validator"),
  eventType = "on" + event.type.replace(/^validate/, "");
  // this fixes handling the deleted validator:
  if (!validator) return;
  validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
}

我正在尋找解決方案並在博客文章中找到它。

資料來源： http ： //devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/