Onsubmit multiple javascript functions

Question

Does anyone know how to enable multiple features? What I intended to do is: onsubmit checks if all these functions return true, if they all return true, then I do action = "checked.html"

<form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return validateName() || validatePhone() || validateAddress() || validateEmail()"> 

However, what actually happened, the computer checks the code from left to right, and the result of the next function will replace the previous one and so on, to the end. Thus, even if all three of the first functions return false, while the last is true, the computer will take action = "checked.html", which is not what I intend to do ... could someone please help me it was like 4 hours, I'm trying to fix it: S Thank you!

Also, when I tried to do something like <form onsubmit="return verify1() && verify2()"> it does not work, all it does is check verify1 (), and not the following ...: (

CLARIFCATION: In the view, I need to call four validation functions. Send should be prevented if all four functions do not return true, but all four should always be called, even if some of them return false.

Answer 1

Use & instead of && .

&& uses a short circuit rating and therefore does not evaluate the right operand if the left operand is false.

& always evaluates both operands.

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

EDIT: Sorry, I forgot that & will not return the actual boolean. Wrap the expression in parentheses and use double ! to convert it like (now). (You need not worry if you use the result in an if test, but the return value from the event handler should be the actual Boolean.)

PS: Here's a pretty awkward demo showing that all four functions are being called, but generating the general true or false result you need: http://jsfiddle.net/nnnnnn/svM4h/1/

Answer 2

Change your code to use AND instead of OR

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

The reason is that if you use OR as soon as this first function returns true javascript, do not bother to check other functions. Also, you do not want to use OR, because if the first check was false and the second was true, the form will still be sent, because at least one of your checks is TRUE.

See fiddle to show that it works, both checks are executed and show a warning, but since check2 returns false, the form is not submitted - if you want to play with the results of returning the functions check1 and check2 and use && & and ||

Having understood the problem better, you need to use the single &, but since true & true returns 1, not true , you need to write it like this:

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

Answer 3

if all you need is to make sure that all functions return true before continuing, then use && not || and to ensure that the expression is not evaluated at the discretion of the return function, add additional brackets

 <form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return (validateName() && validatePhone() && validateAddress() && validateEmail() )"> 

Answer 4

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

So, JS is the code that will do what you want:

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

Now in the form just use:

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

Here is a working JSFiddle example.

EDIT: Made boo boo below, fixed.

Using OR was wrong, but the reason AND does not work, as you expect, due to Short-circuit_evaluation .

OR: evaluation stops on the first operand, which is true and true, returns AND: evaluation stops on the first operand, which is false, and false returns

Answer 5

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

use this code

Answer 6

To test my form, I simply created a function called validateForm () {}, then inside this function I put all the code needed for a full validation. Then onsubmit = "validateForm ()" is used. He checks it in order and only sends it if all the conditions are correct.

Answer 7

After checking the method, first execute the validateName () function, and it will process the verification of the next function, if only the first function is true, and in order to fry the third function, you need to return true for the first and second functions. Therefore, just imagine that if all the functions are invalid and even you have another error message, you will only see the error message of the first function. Once the validateName () function passes, you will see the validatePhone () ect error message.

 <form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return (validateName() && validatePhone() && validateAddress() && validateEmail() )"> 

You cannot use the above if you intend to display error messages in accordance with the above checks on the first submit, and you can use the following method if you want to run the entire function (or display all validation errors) for sending.

 <form id="myForm" name="myForm" action="checked.html" method="post" onsubmit=" if( ( validateName() && validatePhone() && validateAddress() && validateEmail() ) == false) { return false; } ">