Simple Form Validation

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>form validation</title>
</head>

<body>

<!–<script type=”text/javascript”>

function checkform()
{
var user = document.getElementById(‘field1,field2,field3,field4,field5’).value;

if(user.length==0)
{
alert(“enter value”);
return false;
}
/* else if(user.length<5)
{
alert(“invalid value”);
return false;
}*/
else
{
alert(“valid user”);
return true;
}

}
function checkuser()
{
var user=document.getElementById(‘field1,field2,field3,field4,field5′).value;
var element=document.getElementById(“labeluser”);

if(user.length<5)
{
element.innerHTML=”Invalid Username”;
element.style.color=”red”;

}
else
{
element.innerHTML=”valid Username”;
element.style.color=”green”;
}
}
</script>

<form onsubmit=’return checkform()’>

<input type=”text” id=”field1″ onblur=”checkuser()” />
<input type=”text” id=”field2″ onblur=”checkuser()” />
<input type=”text” id=”field3″ onblur=”checkuser()” />
<input type=”text” id=”field4″ onblur=”checkuser()” />
<input type=”text” id=”field5″ onblur=”checkuser()” />

<label id=”labeluser”></label>

<input type=”submit” value=”submit” />

</form>–>
<script type=”text/javascript”>

function button_action()
{
if(!document.myform.field1.value)
{
alert(“enter fields1”);
document.myform.field1.focus();
return false;
}
if(!document.myform.field2.value)
{
alert(“enter fields2”);
document.myform.field2.focus();
return false;
}
if(!document.myform.field3.value)
{
alert(“enter fields3”);
document.myform.field3.focus();
return false;
}
if(!document.myform.field4.value)
{
alert(“enter fields4”);
document.myform.field4.focus();
return false;
}
if(!document.myform.field5.value)
{
alert(“enter fields5″);
document.myform.field5.focus();
return false;
}

/*myform.action=”page_to_submit_to”;
document.myform.submit();*/
alert(“congrats”);
}
</script>

<form name=”myform”>

<input type=”text” name=”field1″ size=”10″ />
<input type=”text” name=”field2″ size=”10″ />
<input type=”text” name=”field3″ size=”10″ />
<input type=”text” name=”field4″ size=”10″ />
<input type=”text” name=”field5″ size=”10″ />
<input type=”button” value=”submit” onclick=”button_action()” />

</form>
</body>
</html>

output

First Output

Second Output

Third Output

Fourth Output

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s