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++;
}

Can you tell what should be the sequence of clicks I have to make to understand the issue? — mighty_dev
– mighty_dev, Commented Mar 21, 2020 at 11:27
It should not allow to move to next step or confirm the page until the data is submitted in the textboxes. — Pankaj
– Pankaj, Commented Mar 21, 2020 at 18:40
What do you mean with tab? Btw note that jquery-step has a SSL error. — Zauberbutter
– Zauberbutter, Commented Mar 27, 2020 at 14:55

Daniel · Accepted Answer · 2020-03-27 22:20:26Z

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.

answered Mar 27, 2020 at 22:20

Daniel

3,3901 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pankaj Over a year ago

can u please share the fiddle?

Collectives™ on Stack Overflow

Jquery validation not working for second row in table

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related