jQuery .validate() will not work on dynamically created table rows

Question

I am working on using jQuery validation plugin to make sure all the inputs in my table are between 0 to 10. Each table rows are dynamically created by JS, here is my html table and JS for adding table row:

<form>
    <table id="lineItemTable">
        <tbody>
        <tr>
            <td>
                <input type="text" name='gross' class="gross"/>
            </td>
            <td>
                <input type="text" name='tare' class="tare"/>
            </td>
        </tr>
        </tbody>
    </table>
    <p id="add">add row</p>
</form>

$("#add").click(function() {
    var newRow = $('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last');
    newRow.find('.gross').val('');
    newRow.find('.tare').val('');
    return false;
});

And here is my jQuery validation:

$("form").validate({
    rules: {
        gross: {
            range: [0, 10]
        },
        tare: {
            range: [0, 10]
        }
    },
    submitHandler: function() {
        var tableObj = $('table tbody tr').map(function(i) {
            var row = {};
            $(this).find('td').each(function(i) {
                row[rowName] = $(this).find("input, select").val();
            });
            return row;
        }).get();
        $.ajax({
             //code omitted
        });
    }
});

My goal is to use this validation to make sure each table row value is between 0 and 10 so that I can submit all the data via $.ajax.

The issue I am having right now is it only prevent the ajax call from happening for the first table row. Any dynamically created table row with invalid data will somehow gets send through ajax as long as the first table row is following the validation rules.

Can someone please help me with this issue?

Answer 1

I solved the problem, but apparently after tons of research this appeared to be a weird one.

It turned out that I must to modify the jquery.validate.js library in order to make it work.I guess the lib does not provide enough support when validating child element.

Under checkForm, change the following code:

checkForm: function() {
            this.prepareForm();
            return this.valid();
         },

To:

checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ ) {
        if(this.findByName(elements[i].name).length!=undefined &&this.findByName(elements[i].name).length>1){
            for(var count=0; count<this.findByName(elements[i].name).length;count++){
                this.check(this.findByName(elements[i].name)[count]);
            }
        }else{
            this.check(elements[i]);
        }
        return this.valid();
    }
},

Answer 2

Try to reinit validation after a row was added. To avoid code duplication you can wrap it in a function:

function initValidation() {
    $("form").validate({
        rules: {
            gross: {
                range: [0, 10]
            },
            tare: {
                range: [0, 10]
            }
        },
        submitHandler: function() {
            var tableObj = $('table tbody tr').map(function(i) {
                var row = {};
                $(this).find('td').each(function(i) {
                    row[rowName] = $(this).find("input, select").val();
                });
                return row;
            }).get();
            $.ajax({
                //code omitted
            });
        }
    });    
}

$("#add").click(function() {
    var newRow = $('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last');
    newRow.find('.gross').val('');
    newRow.find('.tare').val('');
    initValidation();
    return false;
});