Validating Dynamic Table Jquery

HTML code

<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 Namelabel>
<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 Employera>
div>
div>
div>
div>
<hr>
<input type="submit" value="Save" class="btn btn-primary"/>
div>
form>

JS code

$("#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));
$('input[name="work_emp_name['+counter+']"]').rules("add", {
required: true
});
counter += 1;
});

code reference

http://jsfiddle.net/Yy2gB/11/

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jignesh Kumar6y ago
Hi Rameez,

Please this link which will help to solve your problem,
https://stackoverflow.com/questions/11536271/validate-dynamically-added-input-fields
0
Joginder Banger6y ago
HTML code
<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 Namelabel>
            <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 Employera>
                    div>
                div>
            div>
        div>
        <hr>
            <input type="submit" value="Save" class="btn btn-primary"/>
            div>
form>
JS code
$("#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));
    $('input[name="work_emp_name['+counter+']"]').rules("add", {
        required: true
    });

    counter += 1;
});
code reference
http://jsfiddle.net/Yy2gB/11/
0