ExNo05(lena)

8/7/2019 ExNo05(lena)

http://slidepdf.com/reader/full/exno05lena 1/11

EX NO : 5 FORM VALIDATION USING JAVASCRIPT

DATE:

AIM:

To validate form and login page using JavaScript.

ALGORITHM:

1. Design the login page. Username and Password are text fields, a Checkbox-Remember

me, Submit button, a link to the register page.

2. Design the register page to contain the following. Username, password, date of birth,

address, phone number, submit and reset buttons.

3. Using JavaScript perform validations for username, password, dob, phone number in

the register page.

4. These entries are mandatory. Username must start with character, password and

confirm password must match and must be of 4 characters only. Phone number should

be 8 digit.

5. An alert box specifies the correct format for each data appears if the user moves from

one field to another.

6. The login page checks for username match. If the remember me checkbox is selected,

the password field appears.

8/7/2019 ExNo05(lena)


DEFINITION:

JavaScript is a scripting language designed to add interactivity to the HTML page.It is usually

embedded directly to the html pages.

DESCRIPTION:

Description Definition Usage

JavaScript variables Declared using the var

keyword.

A variable declared within a

function has a local scope.

Variable declared without the

var keyword ahs a global

scope.

Assigning values to variables

that have not yet beendeclared also are global.

var x=5;

var car;

x=x+y;

y=z-6;

Arithmetic Operators:

+ addition

-Sub

* Multiplication

/Division

% Modulus

++ Increment

--Decrement

Assignment Operators =

+=

-=

*=

%=

/=

x=y

x+=y

y-=z

y*=z

x%=z

x/=z

Comparison Operators = is equal to

== stricty equal to

> Greater than

< Lesser than

<= Lesser than or equal to

>= Greater than or equal to

!= Not equal to

Given that x=5, x=8 is false

x===5 is false

x===5 is true

Logical Operators To determine the logic

between two variables

&&

X=2 y=5

(X<4&&y>4 )is true

8/7/2019 ExNo05(lena)


||

!

Conditional Statements If..else

if(condition)

{

Code

}

else

{

Code

}

Switch statements

switch(v)

{case 1: execute code

break;

case2:

execute code

break;

default:

}

Popup Boxes Alert Box:

When an alert box comes,user will have to click OK to

proceed.

Confirm Box:

When a confirm box pops up ,

the user has to click either OK

or Cancel to proceed.

Prompt box:

Used when the user has to

enter value before entering

the page.

alert(hello world);

confirm(You agree??);prompt(pls enter your

name);

Functions A function contains code that

will be executed by an event

or call to the function.

Return statement specifies

value to be returned by the

function.

Function xyz()

{

Code;

return x;

}

8/7/2019 ExNo05(lena)


Loops for(;;)

do while

while

for ..in

Events onLoad and upLoad events

are triggered when user

enters or leaves thepage.Often used to deal with

cookies.

onSubmit event triggers

when submit button is

clicked.

onMouseOver when mouse

is over an HTML element.

onFocus,onBlur,onchange

are used in combination

mith validation of form

fields.

<form name="login_form"

onsubmit="login_check();">

Inserting Special

Characters

The backslash is used to

insert apostrophes,quotes,

and other spl characters.

Code

\

\

\\

Objects An object has method and

properties.

Properties are values

associated with the object.

Methods are actions that

can be performed onobjects.

var text=hello world

document.write(text.length);

op:11

document.write(toUpperCase(text));

op:HELLO WORLD

Regular Expression It is an object that describes

a pattern of characters.

test() is a function that

searches a string for a

var patt=/pattern/

var patt=new RegExp(e);

document.write(pat.test(cse));

op: true

8/7/2019 ExNo05(lena)


8/7/2019 ExNo05(lena)


var y=document.f1.t2.value;

var y1=y.length;

if(y1!=4)

window.alert("enter only 4 characters for password");

var z=document.f1.t3.value;

if (z!==y)

window.alert("password mismatch");

var a = document.f1.t4.value;

if(a.length<8)

window.alert("phone number should be of 8 digits");

for(i=0;i<8;i++)

{

if(isNaN(a.charAt(i)))

window.alert("invalid phone number");

}

if((document.f1.t1.value==0)||(document.f1.t2.value==0)||(document.f1.t4.value==0)||(docu

ment.f1.ta1.value==0))

window.alert("mandatory fields(*) need to be filled");

var b=document.f1.t5.value;

var b1=b.length;

//var r=new RegExp("^\\d{2}[01-31]/\\d{2}[01-12]/\\d{4}[1970-2011]$")

//var r=new RegExp(/^\[1-31]+\/+[1-12]+\/+[1990-2011]+$/)var r=/^\d{2}\/\d{2}\/\d{4}/;

if(!r.test(b))

window.alert("entered date incorrect");

}

</script>

</head>

<body>

<form name="f1" method="get">

<label>USER NAME *

<input type="text" name="t1"><br></br></label>

<label>PASSWORD *

<input type="text" name="t2"/><br></br>

</label>

<label>CONFIRM PASSWORD


8/7/2019 ExNo05(lena)


</label>

<label>PHONE NO *


</label>

<label>D.O.B(DD/MM/YYYY):

<input type="text" name="t5"/><br></br></label>

<label>ADDRESS *:

<textarea name="ta1" rows="5",cols="5">

</textarea>

</label><br>

<label>COURSE :

<textarea name="ta2" rows="5",cols="5">

</textarea>

</label><br>

<label>

<input type="submit" onclick="check()">

</label>

<label>

<input type="button" value="clear">

</label>

</form>

</body>

</html>

In exist.html

<html>

<head><script language="javascript" type="text/javascript">

var n=new Array("aaa","bbb","ccc","ddd");

var p=new Array("111","222","333","444");

function check1()

{

var x=document.f1.t1.value;


var f=0;

for(var i=0;i< n.length;i++)

{if(x==n[i])

{

f=1;

var k=i;

break;

}

}

8/7/2019 ExNo05(lena)


if(f==1)

{

if(y==p[k])

window.alert("login successful");

else

window.alert("invalid password");}

else

window.alert("invalid user");

}

function remember()

{

var a=document.f1.c1.value;

document.f1.c1.value=false;

var x=document.f1.t1.value;


var n = new Array("aaa", "bbb", "ccc", "ddd");

var p = new Array("111", "222", "333", "444");

if (document.f1.c1.value=true)

{

for (var i=0; i <n.length; i++)

{

if (x== n[i])

{

document.f1.t2.value=p[i];

}}

}

}

</script>

</head>

<body>

<form name=f1>

<label>USER NAME

<input type="text" name="t1"><br></br>

</label><label>PASSWORD


</label>

<label>

<input type="submit" onclick="check1()">

</label>

<label>

8/7/2019 ExNo05(lena)


<input type="checkbox" name="c1" onclick="remember()">remember password<br></br>

</label>

</form>

</body>

</html>

OUTPUT:

New user:

8/7/2019 ExNo05(lena)


8/7/2019 ExNo05(lena)


Existing user:

RESULT:

Thus form validation is successfully done using javascript.

ExNo05(lena)

Documents