How to close the Bootstrap modal after submit?

Question

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>

Answer 1

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);
  }
});