如何让 jQuery 验证生成与服务器端 ASP .NET MVC 验证相同的标记？

Posted 2023-04-13

【中文标题】如何让 jQuery 验证生成与服务器端 ASP .NET MVC 验证相同的标记？

【英文标题】：How can I get jQuery validation to produce the same markup as server-side ASP .NET MVC validation?

【发布时间】：2011-01-24 03:59:51

【问题描述】：

我正在使用 ASP .NET MVC 1.0 和 jQuery（包括 validation plugin）开发一个 Web 应用程序。典型“编辑实体”视图的服务器端标记如下

<label for="FirstName">FirstName:</label>
<%= html.TextBox("FirstName", Model.FirstName) %>
<%= Html.ValidationMessage("FirstName") %>

当无效数据发布到 FirstName 字段时，生成的 HTML 是

<label for="FirstName">FirstName:</label>
<input type="text" value="" name="FirstName" id="FirstName" class="input-validation-error text">
<span class="field-validation-error">Please enter the first name.</span>

这正是您对 ASP .NET MVC 开箱即用的期望。

我现在正在使用 jQuery 添加客户端验证，并希望它以完全相同的方式运行 - 即，输入控件被赋予一个 input-validation-error 类，并且一个 span 被添加一个类字段-validation-error，用于显示错误信息。

我快到了，但还不完全。使用 errorElement 选项让验证器为错误消息创建跨度，而不是标签。使用 errorClass 选项意味着输入元素被赋予一个 input-validation-error 类。

我遇到的问题是错误消息跨度也得到了一个输入验证错误类，我希望它有字段验证错误。

我尝试使用 highlight 和 unhighlight 函数来纠正这个问题，但是一旦我开始弄乱 span 上的类，验证本身就会停止工作，只是将表单发布到服务器。

有人对我如何解决这个问题有任何想法吗？谢谢。

【参考方案1】：

查看errorPlacement 回调：

$('form').validate(
    errorClass: 'input-validation-error',
    errorElement: 'span',
    errorPlacement: function(error, element) 
        // Insert and manipulate the span element here:
        error.insertAfter(element)
             .removeClass('input-validation-error')
             .addClass('field-validation-error');
    ,          
    rules: 
        FirstName:  
            required: true 
        
    ,
    messages: 
        FirstName: 
            required: 'Please enter the first name.'    
        
    
);

【参考方案2】：

看起来我遇到的问题是由于摆弄应用于输入和错误元素的类引起的。该插件会查找具有该类的元素，以显示或隐藏错误消息，并在计算有多少无效元素时。

为了避免这些问题，我停止使用 Darin 的答案中显示的 errorClass: 'input-validation-error' 行，并将其保留为默认值。在 errorPlacement 函数中，我将正确的类附加到错误和输入元素，以及将消息插入到 DOM 中的正确位置。现在这一切似乎都奏效了。 javascript如下

$('form').validate(
errorElement: 'span',
errorPlacement: function(error, element) 
    error.insertAfter(element);
    error.addClass('field-validation-error');
    element.addClass('input-validation-error');
,          
rules: 
    FirstName:  
        required: true 
    
,
messages: 
    FirstName: 
        required: 'Please enter the first name.'    
    

);

感谢 Darin 的意见，因为它为我指明了正确的方向。

【讨论】：

在处理与此稍有不同的示例时，我还遇到了 field-validation-error 类被删除的问题。我通过将第 621 行的一部分从 label.removeClass() 更改为 label.removeClass( this.settings.errorClass ) 来修复它。我正在使用 1.6 版的插件，未缩小。