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

Question

我正在使用ASP .NET MVC 1.0和jQuery(包括验证插件)开发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添加客户端验证,并希望它以完全相同的方式运行 - 即输入控件被赋予一类输入验证错误,并且跨度添加了一类字段验证 - 错误,用于显示错误消息.

我快到了,但并不完全.使用errorElement选项可以使验证程序为错误消息创建范围,而不是标签.使用errorClass选项意味着输入元素被赋予一类输入验证错误.

我遇到的问题是错误消息span 也会得到一类输入验证错误,我希望它有字段验证错误.

我已经尝试使用高亮和unhighlight函数来纠正这个问题,但是一旦我开始搞乱跨度上的类,验证本身就会停止工作,只是将表单发布到服务器上.

那里的任何人对我如何解决这个问题有任何想法？谢谢.

Answer 1

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

为了避免这些问题，我停止使用 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.'    
    }
}

});

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