How to check if a <div> is valid with unobtrusive javascript

Question

I have a form which loads a div on client side. I have hard coded textbox controls with all validation attributes, similar to what it renders when loaded from server. Inside the div there is submit button, but when I click on submit all validations messages on the form are displayed. I just need only the div elements validation messages to be shown. Telerik Grid control in ajax mode, does similar thing, i.e., appends textboxes with hardcoded validation attributes on client side, but it manages to fire validations only for the grid not entire form. I think I am missing something here.

$('#div').valid() --> doesn't work
$('#form').valid() --> works

Answer 1

You need to parse the validation rules of the containing form once you add the div to the DOM:

var form = $('#div').closest('form');
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);

and here's a live demo.