JQuery 验证自定义错误消息未显示

Question

以下是我的应用程序中的表单验证javascript：

$('#EmploymentHistoryForm').validate({
ignore: ':hidden, [readonly=readonly]',
rules: {
    'MemberJob.Phone': {
        PhoneFieldValidation: true
    }
},
messages: {
    'MemberJob.Phone': {
        PhoneFieldValidation: $.viewUrl.url.invaliedPhoneMessage
    }
},
showErrors: function (errorMap, errorList) {
    ShowErrors(errorMap, errorList, this.validElements());
},
submitHandler: function (form, event) {
    event.preventDefault();
    return false;
}
});

在这里，$.viewUrl.url.invaliedPhoneMessage 设置在 cshtml 页面（在 ASP.NET MVC 中），在调试 javascript 时，我可以在该变量中看到正确的值 $( '...').validate 函数被命中。

我在 JQuery 个验证器集合中注册了一个新的验证器 "PhoneFieldValidation"：

$.validator.addMethod("PhoneFieldValidation", ValidatePhoneAndAltPhone);

以下是为我添加了此验证规则的输入控件呈现的HTML：

<input class="PhoneFieldValidation" id="MemberJob_Phone" name="MemberJob.Phone" type="text" required="required" aria-required="true">

我可以看到正确触发了验证。这意味着，"ValidatePhoneAndAltPhone" 方法被调用，并根据输入返回布尔结果。

但是，错误消息没有正确显示。它显示 "Warning: No message defined for MemberJob.Phone" 而不是 "Invalid Phone Number".

通过 jquery.validate.js 的 customMessage 函数进行调试时，我可以看到 "this.settings.messages" 集合没有 "MemberJob.Phone" 字段的消息，这似乎是此问题的根本原因.

知道如何解决这个问题吗？

我知道我们可以在 HTML 标签中添加 "data-msg-[rulename]" 属性来解决这个问题。但我确信我目前采用的方法也是正确的。好像我错过了什么。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

你从来没有提到 $.viewUrl.url.invaliedPhoneMessage 来自哪里。

如果您的自定义 PhoneFieldValidation 方法中已经定义了消息，那么您将不会在 messages 对象中定义消息。

~~否则，您不能在没有函数的情况下在 messages 对象中使用 JavaScript 变量。~~

整个问题是由自动构建 .validate() 方法调用的 Unobtrusive 插件引起的。您不能在同一个 form 上多次调用 .validate()；并且所有后续调用都将被忽略。相反，您可以简单地在其 .addMethod() 方法中为 PhoneFieldValidation 定义自定义消息。

$.validator.addMethod("PhoneFieldValidation", function(value, element) {
    // your custom method function here;
}, "This is your custom validation error message");

JQuery 验证自定义错误消息未显示

JQuery validate custom error message is not showing up

javascript

asp.net-mvc

jquery

jquery-validate

unobtrusive-validation