将jQuery验证与动态生成表单的自定义错误消息一起使用

Question

I have a form that allows me to set values for multiple entities (books, for example) within a single HTML form. The ASP.NET MVC view for the page takes a model that contains a List<Book> . This is iterated over to render the form elements for each book.

Let's imagine that my only validation rule is that book title is required.

If the user fails to enter any book titles, then I want to highlight all relevant book title textboxes using a css class and display an alert that says "Book title is required" just once.

I'd like to use the jQuery validation plugin to achieve this.

The documentation tells us that if we want to set a custom error message for an element we do this using the name attribute of the relevant HTML form element in a messages: section of the validate() setup call.

eg (where my HTML element has a name of title )

$(".selector").validate({
    rules: {
        title: "required",
    },
    messages: {
        title: "Book titles must be set",
    }
})

However, this seems incompatible with how ASP.NET MVC model binding needs to use the name attribute, when binding to a list as it makes use of the name property of each form element using a very specific syntax, eg

<form method="post" action="/Home/Create">

    <input type="text" name="[0].Title" value="Curious George" />
    <input type="text" name="[0].Author" value="H.A. Rey" />
    <input type="text" name="[0].DatePublished" value="2/23/1973" />

    <input type="text" name="[1].Title" value="Code Complete" />
    <input type="text" name="[1].Author" value="Steve McConnell" />
    <input type="text" name="[1].DatePublished" value="6/9/2004" />

    <input type="text" name="[2].Title" value="The Two Towers" />
    <input type="text" name="[2].Author" value="JRR Tolkien" />
    <input type="text" name="[2].DatePublished" value="6/1/2005" />

    <!-- There could be several more books in the form... -->
<input type="submit" />

(taken from Haacked )

Are these conflicting usages of the name attribute a deal breaker as far as jQuery validation is concerned?

Answer 1

Unfortunately, you can't use names with those characters "[0].Title" with the jquery validator for the reason you noted above. Jquery validator uses the name attribute of HTML elements to build a javascript object to both set validation rules and validation messages.

One solution, would be to change the value of the name attribute prior to using jquery validator and then set it back before posting your form the server. However, this would only work if there is nothing on the client side depending on names such as "[0].Title".

Answer 2

This is what I do (reduced code for explanation)

Create a global variable to hold validation messages, called: validationMessages

In the errorPlacement option for jquery validation I have:

errorPlacement: function (error, element) { validationMessages += $(error).text() + '<br />'; },

Then here is my submit form function...

function submitForm() 
{
    validationMessages = '';

    var valid = true;

    // do more/other/custom validation and css manipulation here
    // if item not valid, set valid = false and add to validationMessages as in errorPlacement

    if ($("#MainForm").valid() && valid) 
    {
        $("#MainForm").submit();
    }
    else 
    {
        // Show Message eg: mine looks like showAlert('Please complete the form', validationMessages, '600');
    }
}