How to not submit a form if validation is false

Question

How can I make sure the form won't submit if one of the validations is false?

$('#form').submit(function(){
    validateForm1();
    validateForm(document.forms['dpart2']);
    validateForm(document.forms['dpart3']);                     
}); 

Answer 1

$('#form').submit(function(){
    return (validateForm1() &&
            validateForm(document.forms['dpart2']) &&
            validateForm(document.forms['dpart3']))
});

Basically, you return false in the event handler function.

Answer 2

Okay, some of the other solutions will have a lazy fail... you probably want all your validation to run, so that all errors are displayed. The presumption is that your validation methods will return false if they fail.

$("#myform").submit(function() {

    var ret = true;
    ret = validateForm1() && ret;
    ret = validateForm(document.forms['dpart2']) && ret
    ret = validateForm(document.forms['dpart3'])) && ret
    return ret;

});

This way all your validators will be called, but the Boolean value for any failure, will result in a fail.

Answer 3

A thought that comes up automatically: Even if you implemented thorough client side validation be prepared to receive any invalid request data on the server that you can possibly imagine.

Client-side validation never keeps you from server-side validation. It is just a bonus in usability.

Answer 4

If validateForm(...) and validateForm1() return a boolean (true means that no validation error occurred), then you try to do that :

$('#form').submit(function(){
    if (!validateForm1() || !validateForm(document.forms['dpart2']) || !validateForm(document.forms['dpart3'])) {
        return false;
    }
});

Answer 5

If the function returns false, form won't be submitted.

$('#form').submit(function(){
    return  validateForm1() 
            && validateForm(document.forms['dpart2']) 
            && validateForm(document.forms['dpart3']);                                         
              }
});