jquery validate need to click submit twice to submit form

Question

I have a form in a modal, the user has to complete the form (otherwise validation will display the required fields error messages), then click the submit input type, it does

Answer 1

I had the same issue and resolved it by adding the following to my validate:

$("#myform").validate({
  onfocusout: false
});

onfocusout will remove the focus from your form fields and submit button will work on the first click.

See more at https://jqueryvalidation.org/validate/

Answer 2

You are binding a new submit event handler, within submitHandler callback of the plugin. This handler won't fire right away because a submit event is already in progress.

You don't need it. The submitHandler callback will already preventDefault internally within plugin code

Remove this

$("#review-form").submit(function(event) { })

and keep all the code it contains directly within submitHandler

Since you are using serialize() for the data.... you don't need all the individual field variables you create either

Answer 3

This is how I deal with remote validation.

    if (form.find('[data-val-remote]').length > 0) {
        form.find('[type="submit"]').on("click enter", function (evt) {
            var interval = setInterval(function () {
                // keep check if there are any remote pending then prevent submit button from click
                if (Object.keys($('form').validate().pending).length) { 
                    evt.preventDefault();
                } else {
                 // if all remote responded then check form valid or not
                    if (!form.valid()) {
                 // if isvalid then stop interval
                        clearInterval(interval);
                    }
                 // if form valid then submit and stop interval
                    form.submit();
                    clearInterval(interval);
                }
            // loop 100ms
            }, 100);
            return false;
        });
    }