Jquery validation not working for second row in table

Question

Issue Details

I am adding the rows dynamically. Code is inside JQuery steps. Jquery validation is working on first row in table but not on second row in table. I meant, when I click next without typing anything, it shows the tab as red color. But this is not happening for second row in table.

Am I missing anything?

JS Fiddle Link for demo

HTML

<div class="container-fluid">       
    <div class="row">                   
        <main role="main" class="col-md-12 pt-3 px-4">
            <h1 style="text-align:center;">Form</h1>
            <form id="form">                
                <h2>Tab 1</h2>
                <section>
                    <div style="padding-top:10px; padding-bottom:10px; display: flex; align-items: right;">
                        <input type="button" class="btn btn-info" onclick="AddNew();" value="Add New Item">
                    </div>
                    <div class="row">
                        <table class="table table-bordered" id="tbl">
                            <thead class="order">
                                <tr>
                                    <th>Item ID#</th>
                                </tr>
                            </thead>
                            <tbody>                                                                         
                            </tbody>
                        </table>
                    </div>
                </section>
                <h2>Tab 2</h2>
                <section>
                </section>
            </form> 
        </main>
    </div>
</div>

JS

var form = $("#seller-form");
AddNew();

form.steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "horizontal",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
    }
}).validate({
    rules: {                
        'item_no[]': {
            required: true
        }
    }
});

var rowid = 0;
function AddNew() {     
    var data = "<tr>";
    data += "<td data-th='Item ID#'><input type='text' id='item_no[" + rowid + "]' name='item_no[]' class='form-control required'/></td>";
    data += "</tr>";            
    $("#tbl tbody").append(data);
    rowid++;
}

Answer 1

Fix:

You need to specify 'required' as valid attribute in the data string you're building. Change this line:

data += "<td data-th='Item ID#'><input type='text' id='item_no[" + rowid + "]' name='item_no[]' class='form-control required'/></td>";

to this:

 data += "<td data-th='Item ID#'><input type='text' id='item_no[" + rowid + "]' name='item_no[]' class='form-control required=\'required\''/></td>";

Explanation:

I don't actually see any where in the jquery "append" documentation or the linked "htmlString" definition stating that attributes require values. This may very well be dependent on the doctype you're using, or may be specified somewhere else in the jquery documentation that I could not find.

Regardless, you may find that boolean attributes are not well-handled by certain libraries or browsers. Per the HTML spec https://www.w3.org/TR/html51/infrastructure.html#boolean-attribute you may include the value as well, and that will be handled more cleanly in many environments.