I have a form that the user fills out, then they press a "Review Fields" button. This button validates the fields by using jQuery Validation (https://jqueryvalidation.org/documentation/) and opens a bootstrap modal with the fields to be reviewed on it.
After the user reviews their fields in the modal, there is another "Submit Form" button at the bottom of the modal.
So, my "review fields" button has type="submit" to run the validation, but I "return false;" the button. The modal popup "submit form" button also has type="submit" for the same form, but I need to turn "return true;" back on for the form.
This is what I have:
// call to validate form
$( '#formEntry' ).validate();
// when modal is hidden, don't allow form submission
$( '#confirm-submit' ).on('hidden.bs.modal', function () {
$( '#formEntry' ).submit(function() {
return false;
});
});
// when form is valid and submitted, open modal
$( '#submitBtn' ).click( function() {
if ( $( '#formEntry' ).valid() ) {
$( '#confirm-submit' ).modal();
}
});
which works, but the "review" modal opens then submits within half a second, not allowing the user to actually review the fields then click the "submit" button when ready.
#formEntry is my form id
#confirm-submit is my modal id
#submitBtn is my "review fields" button id