Jquery проверка не работает для второй строки в таблице - PullRequest
Новая
       36

Jquery проверка не работает для второй строки в таблице

1 голос
/ 21 марта 2020

Сведения о выпуске

Я добавляю строки динамически. Код внутри JQuery шагов. Jquery проверка работает для первой строки таблицы, но не для второй строки таблицы. Я имел в виду, что когда я нажимаю «Далее», ничего не печатая, вкладка отображается красным цветом. Но этого не происходит для второй строки в таблице.

Я что-то упустил?

JS Fiddle Link для демонстрации

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

1 Ответ

1 голос
/ 28 марта 2020

Исправлено:

Вам необходимо указать 'обязательный' в качестве действительного атрибута в строке данных, которую вы строите. Измените эту строку: 

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 spe c https://www.w3.org/TR/html51/infrastructure.html#boolean -атрибутом вы можете также включить значение, которое будет обрабатываться более четко во многих средах.

...