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;
})
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;
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.