I am having a problem with the modal and the required fields on my application.
In one page, I have like 50 to 60 input fields, Some of them are required and some are not. I cannot just like check the value of every input using their ID whether if its empty or not.
Currently, I added the required class of bootstrap in every required input fields. And it is working fine as it focused on the empty required fields.
Additionally, I am also working on a modal on the same page. When I click the save button, the modal will open and show the acceptance message that the user will accept the terms and agreement.
After the user click the submit button inside the modal, and some required fields are empty, the tooltip of required class will popup and focus on the empty field while the modal is open. Here is the Problem, when I close the modal, the required empty input will not be focused anymore.
Question is, Is it possible to closed the modal programmatically while not losing the focused and the tooltip on the required input?
code for button triggering the modal:
<a href="#" runat="server" id="btnUndertaking"
class="btn btn-success m-t-40" data-toggle="modal"
data-target="#myModal" data-backdrop="static" data-keyboard="false">
<i class="fa fa-floppy-o" aria-hidden="true"></i>SAVE</a>
here is the code for the modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<center>UNDERTAKING</center>
</h4>
</div>
<div class="modal-body">
<div runat="server" id="alert_box1" visible="false" class="alertalert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<asp:Label runat="server" ID="lblalert1" Text=""></asp:Label>
</div>
<div class="row">
<div class="row">
<%-- <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">--%>
<div class="col-md-12">
<div class="white-box">
<p>
I/We hereby certify that all information in this form are true, correct
and complete. I/We understand and agree that: (a) all notices, requests,
demands and other communications shall be deemed to have duly given if sent
to the residential/ other address and/or e-mail address provided herein,
and (b) any misrepresentation and/or falsification of information in this
document is sufficient ground for the cancellation of my/our purchase.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="cmdSubmit" Text="SUBMIT"
CssClass="btn btn-success"
OnClick="cmdSubmit_Click" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
EDITS
I have seen this question with an accepted answer. I am trying to do the same but it is not working with the modal.
I tried implementing this code but the tooltip of required is not showing anymore.
function checkInputs() {
$('input').filter('[required]').each(function() {
if ($(this).val() === '') {
$('#btnUndertaking').prop('disabled', true)
isValid = false;
} else {
isValid = true;
}
});
if(isValid) {$('#btnUndertaking').prop('disabled', false)}
return isValid;
}
//Enable or disable button based on if inputs are filled or not
$('input').filter('[required]').on('keyup',function() {
checkInputs()
})
Looks like I got it already.... Lols, I tired myself for like 3 hours and I got myself a solution.
I will post it so if someone has the same problem. It might help them.
First thanks to this post, mainly to @kris selbekk because he gave me the core solution to get all the required fields.
Checking if an input field is required using jQuery
And then, this.
$("#cmdSave").click(function () {
//get all inputs
const inputs = document.querySelectorAll('input');
// Get only the required ones
const requiredFields = Array.from(inputs).filter(input => input.required);
var counter = 0;
var isValid = false;
for (let i = 0; i <= requiredFields.length - 1; i++) {
//skip if the field is disabled
if (!requiredFields[i].disabled) {
//check the field if required (the input field should be set to `required`)
if (requiredFields[i].required) {
//check if the value is not null
if (requiredFields[i].value === '') {
//Focus the required field.
requiredFields[i].focus();
//set the border color for the user interaction
requiredFields[i].setAttribute("style", "border-color: red");
//show error message to notify user
toastr.error('The field is required');
isValid = false;
break;
}
}
}
counter += 1;
}
//if the counter is equals to the required fields then set the isValid to true
if (counter == requiredFields.length) {
isValid = true;
}
//check if valid, then show the modal.
if (isValid) {
$('#myModal').modal('show');
}
});
Thanks all