Adding validation with MVC 3 & jQuery Validator in execution time

Question

I have a form with validation rendered by c# when the page is loaded, the rendered fields like so:

<input autocomplete="off" class="input-validation-error" data-val="true" data-val-number="The field Idade must be a number." data-val-range="message here" data-val-range-max="25" data-val-range-min="16" data-val-required="The Idade field is required." id="Content_MyFieldId" maxlength="3" name="Content.MyFieldId" value="0" type="text">

and I'm trying put a new html object equals the example with jQuery, but this new field is not validated when I submit the form.

Have a way to add validation in this field using jQuery?

PS: I don't want to use manual method like so:

$("#field").rules("add", {
    required: true,
    messages: {
        required: "Required input"
    }
});

Because I have the rules in the input field, I only want to apply it.

Tented

So you are using Unobtrusive Client Validation currently, but fields you add dynamically are not being validated? – Dingdong

can you provide a sample? You can use jsfiddle.net to do it. – Procyon

Answer 1

Feels like a bit of a hack, but here's how I've done it.

// Target Form
var $form = $("**form selector**");

// Unbind existing validation
$form.unbind();
$form.data("validator", null);

// Check document for changes
$.validator.unobtrusive.parse(document);

// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);

Rich

Refrangible

@Refrangible Hi, thanks, but $.unobtrusive.parse(document) says that $.unobtrusive is undefined, and if I use $.validator.unobtrusive.parse(document) says only undefined (both in firebug). – Tented

@Tented You're right. in MVC3 they've moved the jQuery into an enclosure. The parsing function must be exposed some other way. I'll have a closer look. – Refrangible

@Cesar, sorry ignore last comment. $.validator.unobtrusive.parse is exposed in my example page. – Refrangible

@Tented And yet no affect on the jQuery validation settings. This was a lot easier in MVC2. I'll run some more tests. – Refrangible

@Refrangible Ok, thank you. I'm trying too, but without success yet; – Tented

I have exaxtly the same problem, but after using your code, it says "Unable to get value of the property 'options': object is null or undefined" – Australorp

Sorry, I should pass the form id, rather the place holder id that holds the partial view. It works, great thanks! – Australorp

Answer 2

I solved here using

jQuery.validator.unobtrusive.parseElement($("#element")[0], false);
$.validator.unobtrusive.parseDynamicContent($("#element")[0]);

parseDynamicContent I got here

Procyon

This don't work because in field name has "." and "[]". Thanks – Tented

@Caser: solved by var id -document.getElementByName(name)[0].id; and than use ID instead of name in jquery selecotor, it works form me – Felicita

You saved my day! However, the second line of your code did not work for me, parseDynamicContent was unknown. It was not necessary either. – Jerrold