Pin Me

Using JavaScript to Verify Form Input

written by: vishalseafarer•edited by: Michele McDonough•updated: 1/20/2009

One of the most efficient methods to validate or verify the user input in web forms is by using client side JavaScript. See the following step by step guide to create the JavaScript code for that.

  • slide 1 of 2

    Web-form validation using JavaScript

    One of the most efficient methods to validate or verify the user input in web forms is by using client side JavaScript. Suppose you have a web form containing three text fields - Name, Email and Phone Number and two buttons – Submit and Reset. The user fills up all the required fields, and now it is your turn to verify the form input. However, in cases when there are too many fields in the form, this JavaScript verification becomes complex.

    See the following JavaScript source code for verifying the above form.

    <head>

    <title>Javascript Verification Page</title>

    <script language="JavaScript">

    Hiding script contents from old browsers

    function VerifyData() {

    Checking Form Data

    Following is the source code to check form data. Firstly you have to create a variable for keeping a track of whether the form is valid. Then initialize the variable value to 1, which indicates that the form is valid until this value changes in the due course.

    var valid = 1

    if (document.Customer.FirstLast.value == "") {

    valid = 0

    }

    if (document.Customer.Email.value == "") {

    valid = 0

    }

    if (!CheckPhoneNumber(document.Customer.Phone.value)) {

    valid = 0

    }

    Submitting the Form

    Next comes the decision, whether to submit the form or not.

    if (!valid) {

    alert("Complete all the fields and enter a valid phone number")

    }

    return valid

    }

    function CheckPhoneNumber(TheNumber) {

    var valid = 1

    var GoodChars = "0123456789()-+ "

    var i = 0

    if (TheNumber=="") {

    // Return false if number is empty

    valid = 0

    }

    for (i =0; i <= TheNumber.length -1; i++) {

    if (GoodChars.indexOf(TheNumber.charAt(i)) == -1) {

    // Note: Remove the comments from the following line to see this

    // for loop in action.

    // alert(TheNumber.charAt(i) + " is no good.")

    valid = 0

    } // End if statement

    } // End for loop

    return valid

    }

    // end hiding contents from old browsers -->

    </script>

    <link rel="SHORTCUT ICON" href="http://brighthub.com/favicon.ico">

    </head>

    <body>

    <h2>Sample page for JavaScript Form Verification</h2>

    Press the submit button to verify form data.

    <p>

    <form name="Customer" action=""

    method="POST" onsubmit="return VerifyData()">

    Your name:

    <input type="text" name="FirstLast" size="30" maxlength="75" value=""> <br>

    Your email:

    <input type="text" name="Email" size="30" maxlength="75" value=""> <br>

    Your phone number:

    <input type="text" name="Phone" size="30" maxlength="75" value=""> <br>

    <input type="submit">

    <input type="reset">

    </form>

    <p>

    </body>

    </html>

  • slide 2 of 2

    Wrapping up altogether

    <head>

    <title>Javascript Verification Page</title>

    <script language="JavaScript">

    <!-- to hide script contents from old browsers

    function VerifyData() {

    // Source code to check form data.

    // Create a variable to keep track of whether the form is valid.

    // Initializing this value to 1 means, in effect, that

    // the form is valid unless the value changes sometime in the

    // due course.

    var valid = 1

    if (document.Customer.FirstLast.value == "") {

    valid = 0

    }

    if (document.Customer.Email.value == "") {

    valid = 0

    }

    if (!CheckPhoneNumber(document.Customer.Phone.value)) {

    valid = 0

    }

    // To decide whether to submit the form.

    if (!valid) {

    alert("Complete all the fields and enter a valid phone number")

    }

    return valid

    }

    function CheckPhoneNumber(TheNumber) {

    var valid = 1

    var GoodChars = "0123456789()-+ "

    var i = 0

    if (TheNumber=="") {

    // Return false if number is empty

    valid = 0

    }

    for (i =0; i <= TheNumber.length -1; i++) {

    if (GoodChars.indexOf(TheNumber.charAt(i)) == -1) {

    // Note: Remove the comments from the following line to see this

    // for loop in action.

    // alert(TheNumber.charAt(i) + " is no good.")

    valid = 0

    } // End if statement

    } // End for loop

    return valid

    }

    // end hiding contents from old browsers -->

    </script>

    <link rel="SHORTCUT ICON" href="http://brighthub.com/favicon.ico">

    </head>

    <body>

    <h2>Sample page for JavaScript Form Verification</h2>

    Press the submit button to verify form data.

    <p>

    <form name="Customer" action="" method="POST" onsubmit="return VerifyData()">

    Your name:

    <input type="text" name="FirstLast" size="30" maxlength="75" value=""> <br>

    Your email:

    <input type="text" name="Email" size="30" maxlength="75" value=""> <br>

    Your phone number:

    <input type="text" name="Phone" size="30" maxlength="75" value=""> <br>

    <input type="submit">

    <input type="reset">

    </form>

    <p>

    </body>

    </html>