如何使用JQuery.Validate添加消息的动态规则?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (394)

我有一个我正在使用jquery.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中得到一个错误...

Exception occured when checking element newInputName, check the 'messages' method.TypeError: Unable to get property 'call' of undefined or null reference

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

如果我从调用规则中删除消息:

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

它按预期工作,但显然我现在没有自定义错误消息。这是为什么?

提问于
用户回答回答于

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

用户回答回答于

使用DOM准备DEMO:http://jsfiddle.net/UZTnE/

使用PageInit和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>

BTW

ignore: null, // include hidden fields
ignore: [], // include hidden fields

扫码关注云+社区

领取腾讯云代金券