add rules to dynamically created elements

http://stackoverflow.com/questions/9386971/adding-jquery-validator-rules-to-dynamically-created-elements/

by ryleyb

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<form name="myForm">
<fieldset>
<legend>My Form</legend>
First Name: <input data-val="true" data-val-required="A date is required." type="text" id="firstName" name="firstName"> * required<br>
Last Name: <input type="text" name="lastName">
</fieldset>
<input type="submit">
</form>

CSS

.error { color: red; }

JavaScript

var v = $("form").validate({
    rules: {
        firstName: {
            required: true
        }
    },
    submitHandler: function() {
        console.log('successful submit');
        return false;
    }
});


$('form fieldset')
    .append('<br>New Field: <input type="text" data-val="true" data-val-required="A date is required." name="newField"> * Also required');
$.validator.unobtrusive.parseElement($('form').find('input[name="newField"]').get(0));