jQuery unobtrusive validation ignores data-val-required message in MVC3

Question

I have used the method described here to localize my data annotation messages and basically it is working fine in normal form posts. I can see the localized validation message on client side as well.

However, problem occurs when I have a partial view that has the input fields to be validated and is loaded using an ajax call. For some reason, I get the default validation message ("This field is required") instead of my localized message that is set in data-val-required attribute of the element.

I have verified the following:
1. I have included both "jquery.validate.min.js" and "jquery.validate.unobtrusive.min.js".
2. I checked the ajax response and it does contain data-val-required attribute with localized message.

I have already tried the following solutions:
1. I tried parsing the ajax response (that didn't work) as $.validator.unobtrusive.parse('form')
2. Parsing dynamic content for validation as described here. Still no solution.

I have a pressing deadline and this is troubling me.

Ossify

Are you attempting to validate immediately after adding the content from the partial, or is the dynamic content submitted normally with the rest of the form? – Lonnalonnard

The dynamic content is submitted normally with the rest of the form. – Ossify

Finally had a breakthrough. There were two forms in my page, one in the index page and one in the partial page. The buttons on whose click the form would submit were on index page. I moved the buttons in the partial page so that it is inside the form element of the partial page, and lo! it worked fine. Although the problem is solved, I do not know what caused the problem and how moving the buttons in the innermost form solved it? My problem is solved but if someone can help me understand the cause, I could mark it as an answer and close this question. – Ossify

Does the resultant markup (from loading the partial view) create a form within a form? If so, that would be the problem. A form cannot have another form within it. – Lonnalonnard

Yes, the markup contains a form within a form. The elements with the validation attributes were in the inner form while the buttons were in the outer form. I assume that it was submitting the outer form. Why would the inner form create a problem? – Ossify

Well, for starters, it's invalid markup: w3.org/TR/xhtml1/#prohibitions. Since quite a few jQuery plugins rely on traversing the DOM tree to do their magic, invalid HTML tends to break them. – Lonnalonnard

Answer 1

I think you already tried this: https://mcmap.net/q/209384/-jquery-validate-unobtrusive-not-working-with-dynamic-injected-elements - the answer by Steve Lamb helped me the most.

Basically, you need to re-initialize the validator whenever you change the page content, as the validation code builds a list to track the controls it needs to validate only once, on page load...

I also seemed to have to add some extra code to go through and make sure the inputs were named correctly. Give me a moment and I'll dig the code up. - hmm, sorry, that code was part of a client app, and I can't post it. Not too sure it would have made a difference anyway...

Lonnalonnard

Thanks Tieson, I had tired that. However, I accidentally solved it. Read my comment below the question. Still confused what the problem was. – Ossify

Answer 2

Just in case someone drop in this question, as the documentation states, it is required that your field has a name attribute:

Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. A 'name' attribute must also be unique to the form, as this is how the plugin keeps track of all input elements. However, each group of radio or checkbox elements will share the same 'name' since the value of this grouping represents a single piece of the form data.

Source

Westerfield