如何在 ASP.NET MVC 3 中自定义不显眼的验证以匹配我的风格？

Posted 2023-05-08

【中文标题】如何在 ASP.NET MVC 3 中自定义不显眼的验证以匹配我的风格？

【英文标题】：How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

【发布时间】：2011-07-26 02:53:37

【问题描述】：

MVC 3 中的默认验证基于jQuery Validation，我通常可以使用以下内容对其进行自定义：

$.validator.setDefaults(
  submitHandler: function()  alert('submitHandler'); ,
  errorPlacement: function(error, element) 
    // do something important here
    alert('errorPlacement');
  ,
  errorClass: "error",
  errorElement: "input",
  onkeyup: false,
  onclick: false
)

但是，这似乎在 MVC 3 中不起作用。具体来说，errorPlacement 似乎从未被调用过，我不知道为什么。我会调用 submitHandler，但不会调用 errorPlacement。

如何自定义验证以匹配我网站样式所需的任何结构/样式？默认值很好，但它并不总是适用于所有情况。

【参考方案1】：

在我的代码中，我没有使用$.validator.setDefaults，而是使用$("#form_selector").data('validator') 访问表单验证器，然后更改设置。

$(function () 

    var validator = $("#form_selector").data('validator');
    validator.settings.errorPlacement = function(error,element) 
        alert('errorPlacement');
    ;

);

看看它是否适合你。

【讨论】：

工作得很好，谢谢！想弄清楚为什么 mvc3 版本的验证不能像普通的 jquery 验证那样理解自定义。

这行得通，除了我还需要设置errorClass、errorElement等。有什么建议吗？

你在哪里调用 $("#form_selector").data('validator') ？当我这样做时，不会返回任何属性。

请注意，从 jquery.unobtrusive 3.2.6 开始，这不再有效......这不应该包含在 jQuery 函数中。安东的回答似乎是今天最正确的。

【参考方案2】：

我遇到了同样的问题，但意识到 Unobtrusive 插件实际上是引起问题的，它会覆盖您设置的任何选项！诀窍是按以下顺序编写/包含您的代码：

验证插件 您的自定义代码和选项 不显眼的插件

任何其他顺序，这将无法正确设置！

【讨论】：

谢谢。迄今为止最简单、最优雅的解决方案。

aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/…

为什么这不是公认的答案？！我已经在各种遗留项目上与这个问题斗争了几个月和几个月，并且偶然遇到了这个问题。现在这很有意义。谢谢。

这种不显眼的做法会消除您的选择，因此请使用公认的解决方案。不知道这是否是过去 5 年的变化，所以以前可能工作过

【参考方案3】：

这样做的正确方法：

脚本顺序：

验证插件 不显眼的插件 您的自定义代码和选项

自定义代码和选项脚本：

var settings = 
   //...
; 

// override jQuery unobtrusive validator settings
$.validator.unobtrusive.options = settings;

【讨论】：

谢谢！确实，这是正确的方法，当您需要覆盖这些设置：errorClass、errorElement 并想要扩展这些功能：errorPlacement 、invalidHandler 和 success。对于所有其他选项，您应该使用@ChrisBarr 提出的解决方案

这是现在使用 MVC 5 和 Bootstrap 4 和 JQuery 3.3.1 执行此操作的正确方法

【参考方案4】：

我将此代码用于我的自定义设置：

    const validationCustomSettings = 
        validClass: "is-valid",
        errorClass: "is-invalid",
    ;
    jQuery.validator.setDefaults(validationCustomSettings);
    jQuery.validator.unobtrusive.options = validationCustomSettings;

【参考方案5】：

我为此所做的只是复制了我的样式以匹配 Unobtrusive 验证器添加的元素。

@html.ValidationMessageFor(x => x.EmailAddress, "", new  @class = "field-error" )

当发生验证错误时，“ValidationMessageFor”会添加一个类“field-validation-error”，如下所示。

<span class="field-error field-validation-error" data-valmsg-for="EmailAddress" data-valmsg-replace="true"><span for="EmailAddress" generated="true" class="">Email address is Required.</span></span>

所以我复制了我的风格像

.field-error.***field-validation-error*** position:relative;color:#fff;background:#589BC9;

我认为这是解决此问题的简单方法。