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

Posted 2023-05-09

【中文标题】JQuery 验证自定义错误消息未显示

【英文标题】：JQuery validate custom error message is not showing up

【发布时间】：2018-02-08 00:38:55

【问题描述】：

以下是我的应用程序中的表单验证 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”方法被调用，并根据输入返回一个布尔结果。

但是，错误消息没有正确显示。它显示“警告：没有为 MemberJob.Phone 定义消息”而不是“无效的电话号码”。

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

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

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

对此的任何帮助将不胜感激。

谢谢

【问题讨论】：

你永远不会提到$.viewUrl.url.invaliedPhoneMessage来自哪里。

【参考方案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");

【讨论】：

我已更新问题以提及 $.viewUrl.url.invaliedPhoneMessage 的来源。但是，我可以在调试时看到该变量的预期值，这似乎不是问题。

到目前为止，我找到了一种解决方案，那就是在 $.validator.addMethod() 函数中传递消息，并且它可以工作。但是我仍然不知道为什么“消息”部分中指定的消息不起作用。

@Nirman，页面是如何构建的或服务器上有什么并不重要； JavaScript 只关心在浏览器源代码中看到的最终呈现的代码。检查 DOM 并查看 messages 对象内部的内容。

@Nirman，您之前也从未提到过 ASP。你在使用不显眼的验证插件吗？如果是这样，那么您不能自己构造.validate()...它不会覆盖由Unobtrusive 插件构造的.validate() 的实例。

哦，对不起.. 实际上，我认为它与 ASP.NET MVC 没有任何关系，所以我没有在问题中提及。但是，是的，我为 ASP.NET MVC 添加了一个标签，但版主删除了它！你的意思是说，如果我们有不显眼的验证插件，那 $('#EmployementHistoryForm').validate(..) 就不能工作？我在此页面中加载了 jquery.unobtrusive-ajax 插件。它会导致问题吗？