如果在动态 html 上无效，则阻止表单提交

Question

I have a .net core view which has a for loop less than 6 and then generates some html table rows which therein contains a select list and input type number with maxlength=600 and max=3.

Whats happening is on the 1st row when i satisfy all values and submit the form posts to the server as ideally.

But when also the 2nd row is populated with in-valid values the form still submits

How can I prevent the form from submitting if invalid values are captured.

My current code does:

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

Last but not least my jquery function to prevent form submit:

$('#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

Try this:

$('#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;

})