jQuery Validation From Dynamic Form Not Working

Question

I am retrieving a form with ajax, once i have received the form and added it to the DOM, i try to append some validation to it with jQuery, the result is not as expected.

The HTML that i insert into the page from an AJAX call is:

<form id="accept-form">
    <input id="txName" type="text" value="" name="txName" data-val-required="Please Select A Valid User" data-val="true">
    <span class="field-validation-valid" data-valmsg-for="txName" data-valmsg-replace="true"></span>
</form>

I then append this form to my page and attempt to create a jQuery validator for it as follows:

$("#accept-form").validate({
    rules: {
        txName: {
            required: true
        }
    },
    messages: {
        txName: {
            required: "Enter your name"
        }
    }
});

Then when i press the submit button, i have an alert set that returns True regardless of if the txName field is empty or not:

alert($("#accept-form").valid());

Have tried several different approaches, would appreciate any ideas as to what I could be doing wrong.

Answer 1

the anwser is just the way i was parsing the html with the validator.

var form = $("#accept-form");

form.unbind();
form.data("validator", null);
$.validator.unobtrusive.parse(form);

Answer 2

put javascript code in a file and link the file to your main html page on ajax success.

if you link it to your page before ajax completion nothing would happen.