<!-- html forms -->
<!-- JavaScript Form Validation -->
<html>
<head>
<title>HTML Forms</title>
<style>
label
{
display:inline-block;
width:35%;
padding-left:100px;
text-align: left;
font-family:vivaldi;
font-size:x-large;
letter-spacing:2px;
line-height:40px;
}
textarea { vertical-align: top; }
select { vertical-align: top; }
.btn {width: 100px; height: 30px;}
</style>
<script
type="text/javascript" language="javascript">
function fnvalidate()
{
//
User Name Validation
var username =
(document.form1.LN.value).toString().trim();
if( username == "" || username.length
< 4)
{
alert( "Invalid user name! Should have atleast 4
characters." );
document.form1.LN.focus() ;
return false;
}
//
Password Validation
var p1 =
(document.form1.PWD1.value).toString().trim();
//
Check for length
if(p1.length<6)
{
alert("Error: password length");
form1.PWD1.focus();
return false;
}
//
Check for atleast one digit
re = /[0-9]/;
if(!re.test(p1))
{
alert("Error: password must contain at least one number
(0-9)!");
form1.PWD1.focus();
return false;
}
//
Check for atleast one lowercase character
re = /[a-z]/;
if(!re.test(p1))
{
alert("Error: password must contain at least one
lowercase letter (a-z)!");
form1.PWD1.focus();
return false;
}
//
Check for atleast one uppercase character
re = /[A-Z]/;
if(!re.test(p1))
{
alert("Error: password must contain at least one
uppercase letter (A-Z)!");
form1.PWD1.focus();
return false;
}
//
Mobile Number Validation
var mobnum
= document.form1.MN.value;
if( isNaN(mobnum))
{
alert( "Mobile Number can have digits only!" );
document.form1.MN.focus() ;
return false;
}
var S = mobnum.toString().trim();
if(S.length!=10)
{
alert( "Invalid Mobile Number!!! Must have 10 digits..." );
document.form1.MN.focus() ;
return false;
}
//
Email validation
var emailid
= document.form1.Email.value;
var atpos1 = emailid.indexOf("@");
var atpos2 = emailid.lastIndexOf("@");
//
Should contain (only) one @ character
if(atpos1==-1 || atpos1<1 || atpos1!=atpos2)
{
alert( "Invalid Email ID!" );
document.form1.Email.focus() ;
return false;
}
//
Should have atleast 2 character in domain name
var dotpos
= emailid.lastIndexOf(".");
if((emailid.length-dotpos-1)<2 || (dotpos-atpos1)<2)
{
alert( "Invalid Email ID!" );
document.form1.Email.focus() ;
return false;
}
//
Check box validation – atleast one is selected…
var ele
= document.getElementsByName("CB1");
var count=0;
for(var i=0;i<ele.length;i++)
{
if(ele[i].checked==true)
{
count++;
}
}
if(count==0)
{
alert("Please select atleast one hobby...");
form1.CB1.focus();
return false;
}
//
Check box validation
if(!form1.CB2.checked)
{
alert("Please accept the Terms and Conditions to
proceed...");
form1.CB2.focus();
return false;
}
return true;
}
</script>
</head>
<body >
<form
name="form1" action="" method="post" onsubmit="return fnvalidate();">
<fieldset>
<legend>Login details </legend>
<label>User Name </label>
<input
type="text" Name="LN" tabindex=1/>
<label>Password </label>
<input
type="password" Name="PWD1" tabindex=2
/>
<label>Mobile Number </label>
<input
type="text" Name="MN" tabindex=4/>
<label>Email ID </label>
<input
type="text" Name="Email" tabindex=5
/>
<label>Hobbies </label>
<input
type="checkbox" NAME="CB1" VALUE = "S" tabindex=6/>Sports
<input
type="checkbox" NAME="CB1" VALUE = "M" tabindex=7/>Music
<input
type="checkbox" NAME="CB1" VALUE = "R" tabindex=8/>Reading
</fieldset>
<br/>
<center>
<input
type="checkbox" NAME="CB2" required tabindex=9/>I
Agree to the terms and conditions...
<br/><br/>
<button class="btn"
type="submit" tabindex=10>Submit
</button>
<button
class="btn" type="reset" tabindex=11>Reset </button>
<br/><br/>
</center>
</form>
</body>
</html>
OUTPUT:
HTML Form
No comments:
Post a Comment
Don't be a silent reader...
Leave your comments...
Anu