Scribd
Upload
79 views5 pages

Pract - 11: Javascript Form Validation

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.

Uploaded by

Jayesh Sisodiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
79 views5 pages

Pract - 11: Javascript Form Validation

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.

Uploaded by

Jayesh Sisodiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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