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

I'm developing a web application using ASP .NET MVC 1.0 and jQuery (including the validation plugin). The server-side markup for a typical "edit entity" view is as follows

我正在使用ASP .NET MVC 1.0和jQuery(包括验证插件)开发Web应用程序。典型“编辑实体”视图的服务器端标记如下

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

When invalid data is posted to the FirstName field, the resulting HTML is

当无效数据发布到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>

Which is exactly what you would expect from ASP .NET MVC out of the box.

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

I am now adding client-side validation with jQuery, and would like it to behave in exactly the same way - i.e. the input control is given a class of input-validation-error and a span is added with a class of field-validation-error, for showing the error message.

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

I'm almost there, but not quite. Using the errorElement option gets the validator to create a span for the error message, rather than a label. Using the errorClass option means that the input element is given a class of input-validation-error.

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

The problem I've got is that the error message span also gets a class of input-validation-error, and I want it to have field-validation-error.

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

I've tried using the highlight and unhighlight functions to correct this, but as soon as I start messing with the classes on the span, the validation itself stops working and just posts the form to the server.

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

Anyone out there got any ideas as to how I can fix this? Thanks.

那里的任何人都有任何关于如何解决这个问题的想法?谢谢。

2 个解决方案

#1

Checkout the errorPlacement callback:

检查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

Looks like the problem I was having was caused by fiddling with the class applied to the input and error elements. The plugin looks for elements with that class in order to show or hide the error message, and also when counting how many invalid elements there are.

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

To avoid these problems, I stopped using the errorClass: 'input-validation-error' line shown in Darin's answer, and left that as its default value. In the errorPlacement function, I attach the right class to both the error and input elements, as well as inserting the message in the right place in the DOM. This all seems to work now. The JavaScript is as follows

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

});

Thanks to Darin for his input as it pointed me in the right direction.

感谢Darin的投入,因为它指出了我正确的方向。

#1