jQuery验证不适用于表中的第二行 [英] Jquery validation not working for second row in table

问题描述

问题详细信息

我正在动态添加行.代码在JQuery步骤中. jQuery验证在表的第一行上起作用，但不在表的第二行上起作用.我的意思是，当我单击下一步而不输入任何内容时，它会将选项卡显示为红色.但这对于表中的第二行并没有发生.

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.

我想念什么吗?

用于演示的JS小提琴链接

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

推荐答案

修复:

您需要在构建的数据字符串中将"required"指定为有效属性.更改此行:

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>";

对此:

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

说明:

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

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.

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

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.

这篇关于jQuery验证不适用于表中的第二行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！