JavaScript Form Validation
<!DOCTYPE html><html>
<head>
<title>Javascript Validation</title>
</head>
<style type="text/css">
.inpt {
padding: 10px;
width: 290px;
border-radius: 4px;
border: 1px solid #a59c9c;
font-size: 16px;
box-sizing: content-box;
}
input[type="button"] {
padding: 8px;
width: 8%;
border-radius: 4px;
border: 1px solid #c5bfbf;
margin-left: 4%;
}
</style>
<script type="text/javascript">
var frm=document.getElementById('frm');
var sub=document.getElementById('sub');
function empty(e){
user = document.getElementById("unm").value;
pwd = document.getElementById("pass").value;
if(user=="" && pwd==""){
alert('username and password is Empty');
event.preventDefault();
}else{
}
}
function ckdate(){
var dt=document.getElementById('dt').value;
var today = new Date();
var y = today.getFullYear();
var m = ("0" + (today.getMonth() + 1)).slice(-2);
var dy = ("0" + today.getDate()).slice(-2);
var cur=y+"-"+m+"-"+dy;
if(cur < dt){
alert('NOT select Future date');
event.preventDefault();
document.getElementById('dt').value='';
}else{
}
}
function val(e){
var fname=document.getElementById('fname').value;
var lname=document.getElementById('lname').value;
var email=document.getElementById('email').value;
var pwd=document.getElementById('pwd').value;
var cpwd=document.getElementById('cpwd').value;
var pno=document.getElementById('pno').value;
if(fname==""){
document.getElementById('e1').innerHTML="Enter Your First Name";
document.getElementById('e1').style.color="red";
}else{
document.getElementById('e1').innerHTML="";
}
if (lname=="") {document.getElementById('e2').innerHTML="Enter Your Last Name";
document.getElementById('e2').style.color="red";}
else{
document.getElementById('e2').innerHTML="";
}
if(email==""){document.getElementById('e3').innerHTML="Enter Your Email";
document.getElementById('e3').style.color="red";}
else{
document.getElementById('e3').innerHTML="";
}
if(pwd==""){document.getElementById('e4').innerHTML="Enter Your Password";
document.getElementById('e4').style.color="red";}
else{
document.getElementById('e4').innerHTML="";
}
if(cpwd==""){document.getElementById('e5').innerHTML="Enter Your Confirm Password";
document.getElementById('e5').style.color="red";}
else{
document.getElementById('e5').innerHTML="";
}
if(pno==""){document.getElementById('e6').innerHTML="Enter Your phone Number";
document.getElementById('e6').style.color="red";}
else{
document.getElementById('e6').innerHTML="";
}
}
function fnm(){
var fname=document.getElementById('fname').value;
if(fname.length > 10){
document.getElementById('e1').innerHTML="The Character is less then 10";
document.getElementById('e1').style.color="red";
}else{
document.getElementById('e1').innerHTML="";
}
}
function lnm(){
var lname=document.getElementById('lname').value;
if(lname.length > 10){
document.getElementById('e2').innerHTML="The Character is less then 10";
document.getElementById('e2').style.color="red";
}else{
document.getElementById('e2').innerHTML="";
}
}
function passwd(){
var pwd=document.getElementById('pwd').value;
if(pwd.length < 8){
document.getElementById('e4').innerHTML="Password is greater then 8";
document.getElementById('e4').style.color="red";
}else{
document.getElementById('e4').innerHTML="";
}
}
function cnfrm(){
var pwd=document.getElementById('pwd').value;
var cpwd=document.getElementById('cpwd').value;
if(pwd==cpwd){
document.getElementById('e5').innerHTML="";
}else{
document.getElementById('e5').innerHTML="Password is NOT Mached";
document.getElementById('e5').style.color="red";
//document.getElementById('cpwd').value='';
document.getElementById('cpwd').focus();
}
}
function phone(){
var pno=document.getElementById('pno').value;
if(pno.length > 10){
document.getElementById('e6').innerHTML="Phone Number is max 10";
document.getElementById('e6').style.color="red";
}else{
document.getElementById('e6').innerHTML="";
}
}
</script>
<body>
<center><h1>Javascript Form Validation</h1></center>
<center>
<form id="frm" >
<table>
<tr><td>First Name</td>
<td><input class="inpt" onkeyup="fnm()" placeholder="Enter First name" type="text" id="fname"></td>
<td><span id="e1"></span></td></tr>
<tr><td>Last Name</td>
<td><input class="inpt" onkeyup="lnm()" placeholder="Enter Last name" type="text" id="lname"></td>
<td><span id="e2"></span></td</tr>
<tr><td>Email</td>
<td><input class="inpt" placeholder="Enter Email" type="text" id="email"></td>
<td><span id="e3"></span></td</tr>
<tr><td>Password</td>
<td><input class="inpt" onkeyup="passwd()" placeholder="Enter Password" type="password" id="pwd"></td>
<td><span id="e4"></span></td</tr>
<tr><td>Confirm Password</td>
<td><input class="inpt" onchange="cnfrm()" placeholder="Enter Confirm Passowrd" type="password" id="cpwd"></td>
<td><span id="e5"></span></td</tr>
<tr><td>Phone Number</td>
<td><input class="inpt" onkeyup="phone()" placeholder="Enter Phone Number" type="text" id="pno"></td>
<td><span id="e6"></span></td</tr>
</table><br>
<input type="button" id="sub" onclick="val(event)" value="check">
</form>
</center>
</body>
</html>
No comments:
Post a Comment