如何使用addClassRules向类添加消息

我正在使用jQuery Validate来validation具有大量重复数据行的页面。 由于空间有限，每行都有自己的validation摘要。

我使用addClassRules将validation规则应用于页面，但默认错误消息在摘要中过于通用（例如“字段是必需的，字段是必需的”等）。

例：

jQuery.validator.addClassRules({ amount: { required: true, range: [0, 2000000] }, comment: { maxlength: 51 }, owner: { notFirstOption: true }, A: { required: function (element) { return getParentElement($(element), "tr").find(".colB input.B").val().length > 0; }, digits: true }}); 

您可以为每个validation类中的规则应用自定义消息吗？ 理想情况下，我喜欢这样的事情：

 jQuery.validator.addClassMessages({ amount: { required: "Amount is required", range: "Amount must be between 0 and 2,000,000" }, comment: { maxlength: "Comment may be a maximum of 51 characters" }, owner: { notFirstOption: "Please select an owner" }, A: { required: "A is required if B is entered", digits: "A must be numeric" }}); 

预先感谢您提供的任何帮助！

Answer 1

在文档中，答案是为要调用的方法添加别名并添加自定义消息。

检查 “重构规则”标题下的参考 ：

 // alias required to cRequired with new message $.validator.addMethod("cRequired", $.validator.methods.required, "Customer name required"); // alias minlength, too $.validator.addMethod("cMinlength", $.validator.methods.minlength, // leverage parameter replacement for minlength, {0} gets replaced with 2 $.format("Customer name must have at least {0} characters")); // combine them both, including the parameter for minlength $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 }); 

Answer 2

这可以使用下面的代码完成，

  $.validator.messages.accept = 'File must be JPG, GIF or PNG'; $.validator.addClassRules("files", { accept : "png|jpe?g|gif", filesize : 2000000 }); 

Answer 3

我想出了一个非常令人发指的解决方案，但希望能用更多时间更清洁一些……

无论如何，通过jQuery元数据分配消息，我能够为每个类定制它们。

 class="amount {validate: {messages: {required:'Amount is required', range: 'Amount must be between 0 and 2,000,000', digits: 'Amount must be numeric'} } }" 

…等等我的网格行中的每个字段。

我将考虑扩展’addClassRules’方法来接受一个消息参数，但是现在这样做就可以了。

Answer 4

因为每个人显然都对这个问题的回应感兴趣，这是我追求答案的下一步！

我已经在插件中添加了允许添加类消息的方法，并修改了默认的消息处理程序来选择它们。

在’customMetaMessage’之前添加

 customClassMessage: function (element, method) { //Get the elements class(es) var classes = $(element).attr("class").split(" "); //return any message associated with said class and method var m = $.validator.messages[classes[0]]; return m && (m.constructor == String ? m : m[method]); }, 

修改后的’defaultMessage’包含对上述方法的调用

 defaultMessage: function (element, method) { return this.findDefined( this.customMessage(element.name, method), this.customMetaMessage(element, method), this.customClassMessage(element, method), // title is never undefined, so handle empty string as undefined !this.settings.ignoreTitle && element.title || undefined, $.validator.messages[method], "Warning: No message defined for " + element.name + "" ); }, 

添加了“addClassMessages”方法

  addClassMessages: function (className, messages) { if (className.constructor == String) { $.validator.messages[className] = messages != undefined ? messages : $.validator.messages[className]; } else { $.extend(this.messages, className); } }, 

我还没有弄清楚如何在插件之外附加这些附加方法。 至少我不必在’class’属性中声明错误消息。

 jQuery.validator.addClassMessages({ amount: { required: "Amount is required", range: "Amount must be between 0 and 2,000,000", digits: "Amount must be numeric" } }); 

Answer 5

将data-msg-required =“此处出现错误消息”与您要进行validation的元素一起使用

  --Select Account--  A B C D  

Answer 6

试试这个：

 jQuery.validator.addClassRules({ amount: { required: true, range: [0, 2000000], messages: {required: "Required field!", range: "Invalid range!"} }, comment: { maxlength: 51, messages: {maxlength: "Max 51 characters!"} } }) 

我认为这就是你要找的，对吗？