jquery validate plugin on dynamic form inputs

Jquery validation for dynamic added form inputs.

by dhavalbharadva

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="" method="post" id="work_form" class="form-horizontal">
    <div id="word_exp_area">
        <div class="control-group">
            <label class="control-label" for='emp_name'>Employer Name</label>
            <div class="controls">
                <input type="text" name="work_emp_name[0]" class="work_emp_name" value="" />
            </div>
        </div>
        <div class="control-group">
            <label></label>
            <div class="controls">
                <div class="btn-toolbar pull-right">
                    <div class="btn-group"> <a class="btn add_employer" href="#"><i class="icon-plus"></i>Add Employer</a>
                    </div>
                </div>
            </div>
        </div>
        <hr>
            <input type="submit" value="Save" class="btn btn-primary"/>
</form>
<script type="text/html" id="form_tpl">
    <div class = "control-group" > <label class = "control-label"
    for = 'emp_name' > Employer Name </label>
        <div class="controls">
            <input type="text" name="work_emp_name[<%= element.i %>]" class="work_emp_name"
                   value=""/ > </div>
    </div>
</script>

JavaScript

$("#work_form").validate({
    rules: {
        "work_emp_name[0]": {
            required: true
        }
    }
});



_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
    $('.work_emp_name').each(function () {
        $(this).rules("add", {
            required: true
        });
    });
});