如果在動態 html 上無效，則阻止表單提交

Question

我有一個 .net 核心視圖，它有一個小於 6 的 for 循環，然后生成一些 html 表行，其中包含一個選擇列表和輸入類型編號，maxlength=600 和 max=3。

當我滿足所有值並理想地將表單發布到服務器時，發生的事情發生在第一行。

但是當第二行也填充了無效值時，表單仍然提交

如果捕獲到無效值，如何防止表單提交。

我當前的代碼是：

 <tbody>
                                            @for (@i = 1; @i < 6; @i++)
                                            {
                                                if (@i == 1)
                                                {
                                                    required = "required";
                                                    selected = "selected";
                                                }
                                                else
                                                {
                                                    required = string.Empty;
                                                    selected = string.Empty;
                                                }
                                                if (@i == 1)
                                                {
                                                    <tr class="rowClass">
                                                        <td><label id="txtLineNo-@i">@i</label></td>
                                                        <td><input type="number" class="form-control myClass" id="@("txtQty"+i)" name="Qty" data-rule-digits="true" @required /></td>
                                                        <td>
                                                            <select class="js-select2-custom custom-select myClass" name="Description" size="1" id="@("txtDescription"+i)" @required
                                                                    data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load" }'>
                                                                <option label="empty"></option>
                                                                <option value="Boxes" selected>Boxes</option>
                                                                <option value="Envelop">Envelop</option>
                                                                <option value="Pallet">Pallet</option>
                                                            </select>

                                                        </td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtLength"+i)" name="Length" data-rule-digits="true" max="600" data-msg="Max length 600cm" @required /></td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtBreadth"+i)" name="Breadth" data-rule-digits="true" max="250" data-msg="Max breadth 250cm" @required /></td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtHeight"+i)" name="Height" data-rule-digits="true" max="250" data-msg="Max height 250cm" @required /></td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtMass"+i)" name="Mass" data-rule-digits="true" @required /></td>
                                                    </tr>
                                                }
                                                else
                                                {
                                                    <tr class="rowClass">
                                                        <td><label id="txtLineNo-@i">@i</label></td>
                                                        <td><input type="number" class="form-control myClass" id="@("txtQty"+i)" name="Qty" data-rule-digits="true" @required /></td>
                                                        <td>
                                                            <select class="js-select2-custom custom-select myClass" name="Description" size="1" id="@("txtDescription"+i)" @required
                                                                    data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load" }'>
                                                                <option label="empty"></option>
                                                                <option value="Boxes">Boxes</option>
                                                                <option value="Envelop">Envelop</option>
                                                                <option value="Pallet">Pallet</option>
                                                            </select>

                                                        </td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtLength"+i)" name="Length" data-rule-digits="true" max="600" data-msg="Max length 600cm" @required /></td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtBreadth"+i)" name="Breadth" data-rule-digits="true" max="250" data-msg="Max breadth 250cm" @required /></td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtHeight"+i)" name="Height" data-rule-digits="true" max="250" data-msg="Max height 250cm" @required /></td>
                                                        <td><input type="number" class="form-control myClass" maxlength="3" id="@("txtMass"+i)" name="Mass" data-rule-digits="true" @required /></td>
                                                    </tr>
                                                }
                                            }
                                        </tbody>

最后但並非最不重要的是我的 jquery 函數來防止表單提交：

$('#btnSave').on('click', function () {
                    $("tr .myClass").each(function (e) {
                    if ($(this).hasClass('is-invalid' == true)) {
                        return false; //break out of .each     
                        e.preventDefault();
                        console.log('invalid')
                    }
                });
                debugger;
})

Answer 1

嘗試這個：

$('#btnSave').on('click', function(e) {
    $("tr .myClass").each(function(index,element) {
      if ($(element).hasClass('is-invalid' == true)) {    
        e.preventDefault();
        console.log('invalid');
        return false; //break out of .each 
      }
});
debugger;

})