JavaScript Form Validation

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

JS Basic
JS HOME
JS Introduction
JS How To
JS Where To
JS Statements
JS Comments
JS Variables
JS Operators
JS Comparisons
JS If...Else
JS Switch
JS Popup Boxes
JS Functions
JS For Loop
JS While Loop
JS Break Loops
JS For...In
JS Events
JS Try...Catch
JS Throw
JS onerror
JS Special Text
JS Guidelines
JS Objects
JS Objects Intro
JS String
JS Date
JS Array
JS Boolean
JS Math
JS RegExp
JS HTML DOM
JS Advanced
JS Browser
JS Cookies
JS Validation
JS Animation
JS Image Maps
JS Timing
JS Create Object
JS Summary
Examples/Quiz
JS Examples
JS Object Examples
JS DOM Examples
JS Quiz
JS Exam
JS References
JS Objects
JS HTML DOM

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# JavaScript Form Validation

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

## JavaScript Form Validation

JavaScript can be used to validate input 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?

## Required Fields

The function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If a value is entered, the function returns true (means that data is OK):

    function validate_required(field,alerttxt)
    {
    with (field)
    {
      if (value==null||value=="")
      {
      alert(alerttxt);return false;
      }
      else
      {
      return true;
      }
    }
    }

The entire script, with the HTML form could look something like this:

    <html>
    <head>
    <script type="text/javascript">
    function validate_required(field,alerttxt)
    {
    with (field)
    {
    if (value==null||value=="")
      {alert(alerttxt);return false;}
    else {return true}
    }
    }

    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_required(email,"Email must be filled out!")==false)
      {email.focus();return false;}
    }
    }
    </script>
    </head>

    <body>
    <form action="submitpage.htm"
    onsubmit="return validate_form(this)"
    method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
    </form>
    </body>

    </html>

## 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 at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:

    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@");
    dotpos=value.lastIndexOf(".");
    if (apos<1||dotpos-apos<2)
      {alert(alerttxt);return false;}
    else {return true;}
    }
    }

The entire script, with the HTML form could look something like this:

    <html>
    <head>
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@");
    dotpos=value.lastIndexOf(".");
    if (apos<1||dotpos-apos<2)
      {alert(alerttxt);return false;}
    else {return true;}
    }
    }

    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
      {email.focus();return false;}
    }
    }
    </script>
    </head>

    <body>
    <form action="submitpage.htm"
    onsubmit="return validate_form(this);"
    method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
    </form>
    </body>

    </html>

## Altova® MissionKit® - Integrated suite of XML tools

The Altova MissionKit is a suite of intelligent XML tools, including:

XMLSpy® – industry-leading XML editor

- Support for all XML-based technologies
- Graphical editing views, powerful debuggers, code generation, & more

MapForce® – graphical data mapping tool

- Drag-and-drop data conversion with code generation
- Support for XML, DBs, EDI, Excel® 2007, text, Web services

StyleVision® – visual stylesheet designer

- Drag-and-drop stylesheet design for XML & databases
- Output to HTML, PDF, RTF, Word 2007, & more

And more…

Try before you buy with a free fully functional 30-day trial

Download today

WEB HOSTING
ASP.NET Web Hosting
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.