Jquery & javascript Form validation
<html>
<head>
<style type="text/css">
body{
width:100%;
}
.container{
border:2px solid red;
width:550px;
margin:250px 250px;
padding:20px;
}
.trdiv{
overflow:hidden;
padding:10px;
}
.tddiv{
float:left;
width:150px;
padding:5px;
}
input[type=text]{
border:1px solid green;
border-right:10px solid green;
border-left:10px solid green;;
}
input[type=password]{
border:1px solid green;
border-right:10px solid green;
border-left:10px solid green;;
}
.header
{
margin:10px 10px;
color:red;
font:bold;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$("document").ready( function(){
$('#register').submit(function(){
if(($('#unameid').val())==""){
alert("Please Enter User name");
$('#unameid').focus();
return false;
}
return false;
}
);
}
);
function validate(){
var name,pass;
//name=document.validation.uname.value;
name=document.getElementById("unameid").value;
pass=document.getElementById("upass").value;
age=document.getElementById("age").value;
phone=document.getElementById("phone").value;
//name=document.getElementsByName("uname");
//alert(name[0].value);
var phone_ex=new RegExp("[^(+)|0-9-\(\)]");
//alert(name);
if(name=='' & pass=='')
{
alert(" Please Enter the UserName & Password");
document.getElementById("unameid").focus();
// document.getElementById("unameid").select();
return false;
}
if(name=='')
{
alert(" Please Enter the UserName");
document.getElementById("unameid").focus();
return false;
}
if(pass=='')
{
//document.getElementById("unameid").select();
alert(" Please Enter the Password");
document.getElementById("upass").focus();
return false;
}
if(phone=='')
{
//document.getElementById("unameid").select();
alert(" Please Enter the phone number");
document.getElementById("phone").focus();
return false;
}
if (phone_ex.exec(phone)){
alert(" Please Enter Validphone");
document.getElementById("phone").focus();
document.getElementById("phone").value="";
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<div class="header"> Registration Form</div>
<form id="register" name="validation" action="getvalues.php" method="post" >
<!--<form name="validation" action="getvalues.php" method="post" onsubmit="return validate()"> -->
<div class="trdiv">
<div class="tddiv">
Enter The user Name
</div>
<div class="tddiv">
<input type="text" name="uname" value="" id="unameid">
</div></div>
<div class="trdiv">
<div class="tddiv">
Enter the Password
</div>
<div class="tddiv"><input type="password" name="pass" value="" id="upass"></div>
</div>
<div class="trdiv">
<div class="tddiv">
Enter the Age
</div>
<div class="tddiv"><input type="text" name="age" value="" id="age"></div>
</div>
<div class="trdiv">
<div class="tddiv">
Enter the Phone
</div>
<div class="tddiv"><input type="text" name="phone" value="" id="phone"></div>
</div>
<div class="trdiv">
<div class="tddiv"> </div>
<div class="tddiv">
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</body>
</html>
posted by ctsasikumar @ 1:04 PM
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home