Scribd Logo
Upload

Welcome to Scribd!

  • 47 views

    Pract - 11: Javascript Form Validation

    Uploaded by

    Jayesh Sisodiya
    JavaScript can be used to validate form data before it is submitted to a server. There are two types of validation: basic validation checks that required fields are filled out, and data format validation checks that values are in the correct format, like validating an email address contains an "@" sign and is properly structured. Examples are given to validate a name field for basic validation and to check an email address format using JavaScript functions on form submit.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Pract - 11: Javascript Form Validation

    Uploaded by

    Jayesh Sisodiya
    47 views5 pages
    JavaScript can be used to validate form data before it is submitted to a server. There are two types of validation: basic validation checks that required fields are filled out, and data format validation checks that values are in the correct format, like validating an email address contains an "@" sign and is properly structured. Examples are given to validate a name field for basic validation and to check an email address format using JavaScript functions on form submit.

    Original Description:

    gh

    Original Title

    18561_Lab - 11 -RM

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    JavaScript can be used to validate form data before it is submitted to a server. There are two types of validation: basic validation checks that required fields are filled out, and data format validation checks that values are in the correct format, like validating an email address contains an "@" sign and is properly structured. Examples are given to validate a name field for basic validation and to check an email address format using JavaScript functions on form submit.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    47 views5 pages

    Pract - 11: Javascript Form Validation

    Uploaded by

    Jayesh Sisodiya
    JavaScript can be used to validate form data before it is submitted to a server. There are two types of validation: basic validation checks that required fields are filled out, and data format validation checks that values are in the correct format, like validating an email address contains an "@" sign and is properly structured. Examples are given to validate a name field for basic validation and to check an email address format using JavaScript functions on form submit.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 5

    Pract - 11

    JavaScript Form Validation


    JavaScript can be used to validate data in HTML forms before sending off the
    content to a server.

    Form data that typically are checked by a JavaScript could be:

    has the user left required fields empty?


    has the user entered a valid e-mail address?
    has the user entered a valid date?
    has the user entered text in a numeric field?

    JavaScript, provides a way to validate form's data on the client's computer before
    sending it to the web server. Form validation generally performs two functions.

    Basic Validation - First of all, the form must be checked to make sure data was
    entered into each form field that required it. This would need just loop through
    each field in the form and check for data.

    Data Format Validation - Secondly, the data that is entered must be checked for
    correct form and value. This would need to put more logic to test correctness of
    data.

    (1) Basic Form Validation:

    First we will show how to do a basic form validation. In the above form we are
    calling validate() function to validate data when onsubmit event is occurring.
    Following is the implementation of this validate() function:

    Declaration -

    function validateForm() {

    var x = document.forms["myForm"]["fname"].value;

    if (x == null || x == "") {
    alert("First name must be filled out");

    return false;

    (A) Example -

    <!DOCTYPE html>

    <html>

    <head>

    <script>

    function validateForm() {

    var x = document.forms["myForm"]["fname"].value;

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

    alert("First name must be filled out");

    return false;

    </script>

    </head>

    <body>

    <form name="myForm" action="demo_form.asp" onsubmit="return


    validateForm()" method="post">
    First name: <input type="text" name="fname">

    <input type="submit" value="Submit">

    </form>

    </body>

    </html>

    Output -

    (2) Data Format Validation:

    Example - E-mail Validation

    The function below checks if the content has the general syntax of an email.

    This means that the input data must contain an @ sign and at least one dot (.).
    Also, the @ must not be the first character of the email address, and the last dot
    must be present after the @ sign, and minimum 2 characters before the end:

    Declaration -

    function validateForm() {

    var x = document.forms["myForm"]["email"].value;

    var atpos = x.indexOf("@");


    var dotpos = x.lastIndexOf(".");

    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {

    alert("Not a valid e-mail address");

    return false;

    (B)Example -

    <!DOCTYPE html>

    <html>

    <head>

    <script>

    function validateForm() {

    var x = document.forms["myForm"]["email"].value;

    var atpos = x.indexOf("@");

    var dotpos = x.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {

    alert("Not a valid e-mail address");

    return false;

    </script>

    </head>
    <body>

    <form name="myForm" action="demo_form.asp" onsubmit="return


    validateForm();" method="post">

    Email: <input type="text" name="email">

    <input type="submit" value="Submit">

    </form>

    </body>

    </html>

    Output -

    You might also like