JQuery.Validate使用消息添加动态规则

时间:2013-03-18 16:59:27

标签: jquery jquery-mobile jquery-validate

我有一个表格,我正在使用jquery.validate。我最初使用一组规则和自定义消息调用validate ...

$("#formName").validate( {
  rules: {
    myExistingInput: {
      required: true
    }
  },
  messages: {
    myExistingInput: {
      required: "Enter something"
    }
  },
  ignore: null, // include hidden fields (see below)
  submitHandler: function(form) {
    // do stuff
  },
  invalidHandler: function(event, validator) {
    // do stuff (some of the fields may have been hidden by a collapsible panel
    // if there is an error on one of those fields, expand the panel so the error
    // becomes visible)
  }
});

稍后,我动态地向表单添加字段,并为这些字段添加规则......

$("#formName").append(...);

$("#newInputName").rules("add", {
  required: true,
  messages: {
    required: "Enter something else"
  }
});

如果我然后提交表单,我会在jquery.validate ...

中收到错误
  

检查元素newInputName时发生异常,检查   'messages'method.TypeError:无法获取属性'call'   undefined或null引用

在浏览器中调试,我可以看到“check”函数中抛出了错误,并且“method”变量被设置为“messages”。

如果我从规则调用中删除了消息(“添加”,......

$("#newInputName").rules("add", {
  required: true
});

它按预期工作,但显然我现在没有自定义错误消息。

我在SO上看到很多例子表明我的语法是正确的。有什么建议吗?

BTW:jQuery Validation Plugin - v1.11.0 - 2/4/2013

3 个答案:

答案 0 :(得分:22)

您发布的代码似乎正常,但没有错误。

准备好DOM的DEMO:http://jsfiddle.net/UZTnE/

使用PageInit& DEMO进行演示jQuery Mobile:http://jsfiddle.net/xJ3E2/

$(document).on("pageinit", function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true
            }
        },
        messages: {
            field1: {
                required: "Enter something"
            }
        }
    });

    $('[name*="field"]').each(function () {
        $(this).rules('add', {
            required: true,
            messages: {
                required: "Enter something else"
            }
        });
    });

});

<强> HTML

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

<强>顺便说一句

此...

ignore: null, // include hidden fields

应该是......

ignore: [], // include hidden fields

请参阅:jQuery Validate - Enable validation for hidden fields

答案 1 :(得分:5)

$(document).ready(function(){
  $("#controlId").rules("add", {
     required : true,
     messages : { required : 'field is required.' }
  });
});

答案 2 :(得分:0)

作为这个老问题的答案,我喜欢这样做以获得规则对象中的meassges。

添加规则后,您可以添加如下消息:

var inputRules = $('input').rules();
inputRules.messages = {required: 'your message'};

enter image description here

祝你好运!