How to make form only submit if all functions return true?

I want my form to only submit if all my JavaScript functions return true.

Here is my Javascript 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(NewUser)
{
    var p = document.forms["NewUser"]["pwd"].value
    var cP = document.forms["NewUser"]["confirmPwd"].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;
    }
    else
    {
        return true;
    }
}

function validateEmail(NewUser)
{
    var e = document.forms["NewUser"]["email"].value
    var eLength = e.length;
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (eLength == "" || eLength == null) 
    {

        alert("You left the email field blank!");
        return false;
    } 
    else if (e.match(illegalChars)) 
    {

        alert("ILEGAL CHARECTORS DETECTED EXTERMINATE");
        return false;
    } 
    else 
    {
        return true;
    }
}
function validateFirstName(NewUser)
{
    var f = document.forms["NewUser"]["fName"].value;
    var fLength = f.length;
    var illegalChars = /\W/;

    if(fLength > 20)
    {
        alert("First Name has a max of 20 characters");
        return false;
    }
    else if (illegalChars.test(f))
    {
        alert("Numbers,letter and underscores in first name only");
        return false;
    }
    else 
    {
        return true;
    }


}

function validateLastName(NewUser)
{
    var l = document.forms["NewUser"]["lName"].value;
    var lLength = l.length;
    var illegalChars = /\W/;

    if(lLength > 100)
    {
        alert("Last Name has a max of 100 characters");
        return false;
    }
    else if (illegalChars.test(f))
    {
        alert("Numbers,letter and underscores in last name only");
        return false;
    }
    else 
    {
        return true;
    }


}

function validateForm()
{
    //call username function
    validateUserName();

    //call password function
    validatePassword();

    //call email function
    validateEmail();

    //call first name function
    validateFirstName();

    //call first name function
    validateLastName();
}

Here is my HTML:

<table id = "SignUpTable">
        <p id = "SubHeading">Sign Up.</p>
            <form name = "NewUser" onsubmit= "validateForm()" action = "">
                <tr>
                <td class = "FieldName">Username:</td> 
                <td class = "TextField"><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 class = "FieldName">Email:</td> 
                <td class = "TextField"><Input type = "text" name = "email"/></td>
                <tr>
                <td  class = "Information"><em>We need this to verify your account.</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Password:</td>
                <td class = "TextField"><input type = "password" name = "pwd"/></td>
                <tr>
                <td  class = "Information"><em>6-20 characters</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Confirm Password:</td>
                <td class = "TextField"><input type = "password" name = "confirmPwd"/></td>
                <tr>
                <td  class = "Information"><em>just in case you didn't make mistakes!</em></td>
                </tr>

                <!-- Optional -->


                <tr>
                <td class = "FieldName">First Name:</td>
                <td class = "TextField"><input type = "text" name = "fName"/></td>
                <tr>
                <td  class = "Information"><em>optional</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Lastname:</td>
                <td class = "TextField"><input type = "text" name = "lName"/></td>
                <tr>
                <td  class = "Information"><em>(optional)</em></td>
                </tr>

                <tr>
                <td><input type = "submit" value = "Submit"/></td>
                </tr>

        </table>



            </form>
    </div>

And here is a JS Fiddle:

http://jsfiddle.net/vK9aJ/

(Please ignore the bad sizing in the form)

Answers


function validateForm() {
    if(validateUserName() && validatePassword() && validateEmail() && validateFirstName() && validateLastName()) return true;
    else return false;
}

Depending on the return of your function you can chose to submit the form or not.


Need Your Help

knockout.js not working when select list doesn't have options

asp.net-mvc-3 drop-down-menu knockout.js

I think I found a bug in knockout.js in conjuction with the asp.net mvc dropdownlist. When supplying just a list of strings MVC doesn't render the option values on the select element. Knockout.js...

How can I limit users from uploading more then 5MB to the server?

php javascript jquery apache file-upload

I have a check in place via php to determine if the file is to big, the problem is, user has to upload the file to the server first, before i can make the check.