Using jQuery validation with custom error messages with dynamically-generated forms

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.

e.g. (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, e.g.

<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?

do u mean only one of these 3 entities will have Book title? — Muhammad Adeel Zahid
– Muhammad Adeel Zahid, Commented Apr 11, 2011 at 11:26
@Muhammad: No. My entities are books, so they all have the same three pieces of data associated with them. I've updated the last section of my question to make this clearer. — Richard Ev
– Richard Ev, Commented Apr 11, 2011 at 11:29

Mark Redman · Accepted Answer · 2011-04-11 11:33:44Z

1

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');
    }
}

answered Apr 11, 2011 at 11:33

Mark Redman

24.6k20 gold badges99 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Ev Over a year ago

I understand your approach but I think that how ASP.NET MVC uses name attributes is going to be incompatible with how jQuery validation wants to use them. I've updated my post a bit to clarify this.

Mark Redman Over a year ago

@Richard Ev: I dont know how those binding attributes work as I dont use them, so I guess you're right, might not be directly/easily compatible.

Rich Wagenknecht · Accepted Answer · 2013-10-12 20:23:53Z

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".

answered Oct 12, 2013 at 20:23

Rich Wagenknecht

7127 silver badges18 bronze badges

Collectives™ on Stack Overflow

Using jQuery validation with custom error messages with dynamically-generated forms

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related