Question

I have two buttons at the top of a jQuery validated form: one saves changes (the form’s submit button), the other displays a TermsOfService dialog which when agreed will run some other code.

<button class="btn" value="Save Changes" 
        name="submit" type="submit" id="entryFormSave">Save changes</button>


<button class="btn" 
        data-toggle="modal" 
        href="#modal-TOS" 
        data-backdrop="true" 
        data-keyboard="true" 
        id="entryFormSubmit">Submit for review</button>

The first/submit button validates the form – I would love for the second button to validate the form also and if it passes validation, THEN display the TOS modal.

Any help is greatly appreciated.

UPDATE: I’ve tried a number of things, but none have worked. I noted that when adding the data-toggle=”modal” it disables the button triggering the validation. The latest iteration was:
$('#entryFormSubmit').click(function(){
validate();
});

Any button I place in the form validates the form; however, once I add the data-toggle=”modal” property, then the validation is disabled and I’m not enough of a JS maven to understand what to do next.

Answer 1

@frictionlesspauley – Thanks for even the small snippet. I ended up back on the Jquery Validate page and found if I returned false – I interrupted the display of the modal, which is what was desired.

Here’s what I used:

$("#entryFormSubmit").click(function() {
    var ValidStatus = $("#entryForm").valid();

    if (ValidStatus == false) {
        return false;
    }
});