onsubmit multiple javascript functions

Question

Does anyone know how to onsubmit multiple functions? What I intented to do was: onsubmit checks if all these functions return true, if all of them return true, then I do the

Answer 1

To validate my form I simply created a function called validateForm(){} then inside this function I put all the code which is needed for full validation. Then used onsubmit="validateForm()". It checks through it in order and only submits if all conditions are true.

Answer 2

Use & instead of &&.

&& uses short-circuit evaluation and so doesn't evaluate the right-hand operand if the left-hand operand is falsy.

& always evaluates both operands.

onsubmit="return !!(validateName() & validatePhone()
                      & validateAddress() & validateEmail());"

EDIT: Sorry, I forgot that & won't return an actual boolean. Wrap the expression in parentheses and use a double ! to convert it as (now) shown. (You wouldn't need to worry if using the result in an if test, but the return value from the event handler should be an actual boolean.)

P.S.: Here's a rather clunky demo to show that all four functions get called but produce the overall true or false result that you need: http://jsfiddle.net/nnnnnn/svM4h/1/

Answer 3

onsubmit="return validateName() && validatePhone() && validateAddress() && validateEmail()"

use this code

Answer 4

Change your code to use AND instead of OR

onsubmit="return validateName() && validatePhone() && validateAddress() && validateEmail()"

The reason being that if you use OR once that first function returns true javascript won't bother to check the other functions. Also you don't want to use OR because if the first check was false and second is true the form will still submit since at least one of your checks is TRUE.

See fiddle to show this works, both checks execute and show an alert message but because check2 returns false the form doesn't submit - if you want play around with the return results of checks1 and check2 functions and the use of && and ||

After understanding the problem better, you need to use a single &, but because true & true returns 1 and not true you need to write it like this

onsubmit="return ((validateName() & validatePhone() & validateAddress() & validateEmail()) == 1)"

Answer 5

Create a wrapper function, which call each function and checks their return value. At any time if the return value is false you can either stop the form submit by returning false at that time or evaluate the rest of the things and finally return false.

So JS a code that will do what you want is :

function validateForm() {
    var isFormValid = true;
    isFormValid &= validateName();
    isFormValid &= validatePhone();
    isFormValid &= validateAddress();
    isFormValid &= validateEmail();
    return isFormValid? true:false;
}

Now in the form simply use :

<form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return validateForm();">

Here is a working JSFiddle Example.

EDIT : Made a boo boo below, corrected.

Using OR was incorrect, but the reason AND is not working how you are expecting is because of Short-circuit_evaluation.