How to call two functions on a form submit

Question

I am trying to do javascript form validation, and to do this I need to call two functions. One for the password and on for the username (I will also need to call more later on).

Here is my JS code:

function validateUserName(NewUser) { var u = document.forms["NewUser"]["user"].value var uLength = u.length; var illegalChars = /\W/; // allow letters, numbers, and underscores if (u == null || u == "") { alert("You left Username field empty"); return false; } else if (uLength <4 || uLength > 11) { alert("The Username must be between 4 and 11 characters"); return fasle; } else if (illegalChars.test(u)) { alert("The username contains illegal characters"); return false; } else { return true; } } function validatePassword(pwd, confirmPwd) { var p = document.forms["NewUser"]["pwd"].value var cP = document.forms["NewUser"]["cP"].value var pLength = p.length; if (p == null || p == "") { alert("You left the password field empty"); return false; } else if (pLength < 6 || pLength > 20) { alert("Your password must be between 6 and 20 characters in length"); return false; } else if (p != cP) { alert("Th passwords do not match!"); return false; } }

and here is my HTML form:

<form name = "NewUser" onsubmit= "return validateUserName(), return validatePassword()" action = ""> <tr> <td>Username:</td> <td><input type = "text" name = "user"/></td> </tr> <tr> <td class = "Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td> </tr> <tr> <td>Password:</td> <td><input type = "password" name = "pwd"/></td> <tr> <td class = "Information"><em>6-20 characters</em></td> </tr> <tr> <td>Confirm Password:</td> <td><input type = "password" name = "confirmPwd"/></td> <tr> <td class = "Information"><em>just in case you didn't make mistakes!</em></td> </tr> <input type = "submit" value = "Submit"/>

Please ignore the table code.

Should I rather just put it all in one function? Or is there a way to call two functions at once?

Its ok to have several functions, as it is easier to maintain. But, you should create a single function that calls the other two. — DannyB
– DannyB, Commented Apr 27, 2013 at 10:25
you have yourself answered the question. Put all in one function. Just call common function called ValidateData and put everything in one — DevelopmentIsMyPassion
– DevelopmentIsMyPassion, Commented Apr 27, 2013 at 10:26
+1 DannyB. Combining the functions is definitely the WORST way to solve the issue. — Dragos Bobolea
– Dragos Bobolea, Commented Apr 27, 2013 at 10:27

Pebbl · Accepted Answer · 2013-04-27 22:48:01Z

You have multiple ways of approaching this, the easiest for your current set up would be:

combined function

The following will run both functions no matter what state is returned each time, because they are not executed inline as part of a logical expression which will "short circuit" when getting a false value:

function validateForm(){ var validation = true; validation &= validateUserName(); validation &= validatePassword(); return validation; }

And then in your form markup:

<form onsubmit="return validateForm()">

If would probably be advisable, in the interests of making more reusable code, to modify your validation functions so that they accept a form argument. This would mean you could do the following:

<form onsubmit="return validateForm(this);">

.. and have your receiving function do the following:

function validateForm(form){ var validation = true; validation &= validateUserName(form); validation &= validatePassword(form); return validation; }

add multiple events

You could also implement this via the preferred way of applying event listeners which is to use addEventListener instead of the html attribute onsubmit:

/// wait for window load readiness window.addEventListener('load', function(){ /// you could improve the way you target your form, this is just a quick eg. var form; form = document.getElementsByTagName('form')[0]; form.addEventListener('submit', validateUserName); form.addEventListener('submit', validatePassword); });

The above assumes that it's required to support modern browsers. If you wish to support older versions of internet explorer you'd be better off making a function to apply your event handling e.g:

function addEventListener( elm, evname, callback ){ if ( elm.addEventListener ) { elm.addEventListener(evname, callback); } else if ( elm.attachEvent ) { elm.attachEvent('on'+evname, callback); } }

This second option makes it harder to exert a global control over what gets validated, where, when and in what order, so I'd recommend the first option. However I'd would also recommend at least applying your singular submit handler using the JavaScript method above, rather than using onsubmit="".

Qantas 94 Heavy · Accepted Answer · 2013-04-27 10:41:40Z

Simply combine the two with the logical AND operator:

<form name="NewUser" onsubmit="return validateUserName() && validatePassword();" action=""> <tr> <td>Username:</td> <td><input type="text" name="user"/></td> </tr> <tr> <td class="Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="pwd"/></td> <tr> <td class="Information"><em>6-20 characters</em></td> </tr> <tr> <td>Confirm Password:</td> <td><input type="password" name="confirmPwd"/></td> </tr> <tr> <td class="Information"><em>just in case you didn't make mistakes!</em></td> </tr> <input type="submit" value="Submit"/> </form>

I tried that, but it only ran the username validator. Is there maybe something wrong with my JS?
The logical operator works as follows: if the first operand is false, it won't bother with the other one, since the result is false anyway. If validateUserName() is true, then it will go on with validatePassword(). edit: check pebbl's answer. Seems exactly what you need.

lukeocom · Accepted Answer · 2013-04-27 10:36:32Z

There are a few approaches to this. One is to create a function, such as submitForm() which then calls your two other functions. Perhaps using those function calls as part of if statements to provide client side validation.

The other method is to override the default submit functionality of the form, and instead call the functions as you see fit. jQuery provides an easy approach for this. Have a look at http://api.jquery.com/submit/ for more information.

Ideally, the validateUser() and validatePassword() functions would be merged into the one function validateUser(). You may want to provide the code of your current functions for advice on how to do that, if you're stuck...

Hope this helps :)

Ram Singh · Accepted Answer · 2013-04-27 10:34:33Z

Why you are creating two different functions to validate both username and passwords, by the way you can go with this too like below:

Create Another third Function in which these two have to call and check if both returns true then return true otherwise its shows message or whatever you want to do.

Here is the code by which you can do it:

function validateUserName(NewUser) { var u = document.forms["NewUser"]["user"].value var uLength = u.length; var illegalChars = /\W/; // allow letters, numbers, and underscores if (u == null || u == "") { alert("You left Username field empty"); return false; } else if (uLength < 4 || uLength > 11) { alert("The Username must be between 4 and 11 characters"); return fasle; } else if (illegalChars.test(u)) { alert("The username contains illegal characters"); return false; } else { return true; } } function validatePassword(pwd, confirmPwd) { var p = document.forms["NewUser"]["pwd"].value var cP = document.forms["NewUser"]["cP"].value var pLength = p.length; if (p == null || p == "") { alert("You left the password field empty"); return false; } else if (pLength < 6 || pLength > 20) { alert("Your password must be between 6 and 20 characters in length"); return false; } else if (p != cP) { alert("Th passwords do not match!"); return false; } } function finalvalidate() { var newuser = $('[id$=newuser]').val(); var usernameresult = validateUserName(newuser); var pwd = $('[id$=pwd]').val(); var confirmPwd = $('[id$=confirmPwd]').val(); var pwdresult = validatePassword(pwd, confirmPwd); if (usernameresult == true && pwdresult == true) { return true; } else { return false; } }

Hope this will work for you..

dfsq · Accepted Answer · 2013-04-27 10:41:50Z

Create one function to call all your validators:

function validate() { return validateUserName() && validatePassword(); }

HTML

<form name="NewUser" onsubmit="return validate()" action="">

Also in your password validation function you refer to incorrect field name.

Fixed code: http://jsfiddle.net/6sB29/

If you want to alert all the errors (not only the first) you can try something like this:

function validate() { var name = validateUserName(), pass = validatePassword(); return name && pass; }

http://jsfiddle.net/6sB29/1/

@Qantas94Heavy Sure, but the current OP approach (using alerts) makes it quite logical that validation stops at the very first error.

Karan · Accepted Answer · 2015-02-28 05:06:13Z

0

try this

onsubmit="return fun2() && fun3();"

answered Feb 28, 2015 at 5:06

Karan

5851 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to call two functions on a form submit

6 Answers 6

combined function

add multiple events

Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

combined function

add multiple events

Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Linked

Related