Here I have a Bootstrap modal. My requirement is when I successfully submit the form with submit button then I want to close the modal after some seconds. The problem here is when I enter some text instead of integer in my input or if I enter some invalid inputs and then when I click the submit button the input field shows the error and the modal closes after some seconds immediately.

I don't want to close the Bootstrap modal if the input field is invalid when clicking submit button.

How can I do it ?

EDIT: It works perfect with valid input.

html

 <div class="modal-body">
 <form action="">
     <input type="number" name="rows" min="0" value="0" max="10" required><br>
     <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
 </form>
 </div>

script

<script>
 $('#my_button').click(function() {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
});
</script>

Here I have a Bootstrap modal. My requirement is when I successfully submit the form with submit button then I want to close the modal after some seconds. The problem here is when I enter some text instead of integer in my input or if I enter some invalid inputs and then when I click the submit button the input field shows the error and the modal closes after some seconds immediately.

I don't want to close the Bootstrap modal if the input field is invalid when clicking submit button.

How can I do it ?

EDIT: It works perfect with valid input.

html

 <div class="modal-body">
 <form action="">
     <input type="number" name="rows" min="0" value="0" max="10" required><br>
     <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
 </form>
 </div>

script

<script>
 $('#my_button').click(function() {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
});
</script>

• javascript
• html
• jquery
• bootstrap-modal

• What happen when you enter valid input. does popup close after 4 seconds? – Vaibhav Commented Aug 6, 2020 at 5:15
• @Vaibhav yes it works with valid input – D_P Commented Aug 6, 2020 at 5:17

2 Answers 2

Don't set the timeout if the form has invalid values:

$('#my_button').click(function() {
  if ( ! $('form input:invalid' ).length ) {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
  }
});

please try this code snippet

<div class="modal-body">
    <form action="">
        <input type="number" name="rows" min="0" value="0" max="10" required><br>
        <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
    </form>
</div>

<script>
 $('#my_button').click(function() {
    setTimeout(function() {$('#myModal').modal('toggle');}, 4000);
});
</script>