Jquery验证不适用于表中的第二行

Question

问题详情

我正在动态添加行。代码在 JQuery 步骤中。 Jquery 验证正在处理表中的第一行，但不适用于表中的第二行。我的意思是，当我单击下一步而不输入任何内容时，它会将选项卡显示为红色。但这不会发生在表格的第二行。

我错过了什么吗？

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

修复：

您需要在您正在构建的数据字符串中指定“必需”作为有效属性。更改此行：

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

到这里：

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

解释：

我实际上没有在 jquery“附加”文档或链接的“htmlString”定义中看到任何地方说明属性需要值。这很可能取决于您使用的文档类型，或者可能在我找不到的 jquery 文档中的其他地方指定。

无论如何，您可能会发现某些库或浏览器无法很好地处理布尔属性。根据 HTML 规范 https://www.w3.org/TR/html51/infrastructure.html#boolean-attribute，您可能也包含该值，这将在许多环境中更清晰地处理。