Question

I have a form that uses jQuery Validate. You click the Submit button, form gets validated and submitted via ajax. I want to add a step to this process.

I want to check for the presence of a value, say x. If x is NOT in the form I want to go ahead and submit it as I already do. If it IS in the form I want to open a modal window that requests further info THEN submits the form with that extra info added into the request.

Currently I can get the modal to trigger but then the form just continues with the submission. How do I get the form submission to pause while the modal is dealt with by the user?

jQuery Validate has a “success” option that is called after successful validation (which is when I want to check for triggering the modal) but that still doesn’t pause execution.

In a nutshell: How do I validate a submitted form, check if the value x is present, if it is not present submit the form but if it is present pause the submission, pop up a modal window, let the user fill in some more data (and presumably click a “done” or “cancel” button of some sort), add that to the collected form data and then submit the lot? The pausing submission part has me stumped.

Answer 1

Use submit() on the first form…

$('#form1').submit(function() {
    // The below validation goes in here
});

Validate it…

$("#form1").validate({
    // Whatever rules you want to validate by   
});

Check if the form is valid…

if($('#form1').valid()) {
    // Branching on x, example below, will go in here
} else {
    // It's not valid, stop the submission
    return false;
}

Branch on x. If present, open the modal, if not return true to submit the form as is

if (x !== undefined) {
    // Here is where you also need to pass the other form data to the modal
    // append hidden text fields to the form and populate with the values 
    // Open your modal window, then stop the default submit process
    $('#themodalwindow').openModal();
    return false;
} else {
    // No x so submit the form as is
    return true;
}

Now you have to submit the form in the modal…

$('#form2').submit(function() {
    return true;
});

If you appended the data collected in form1 to form2 then submitting the form will include everything you need. BTW, you can cache some stuff in that but this is the gist of it.