Form validation with captcha in javascript
<!doctype html>
<html>
<head>
<title> JavaScript Function </title>
<style>
input[type="submit"]{
width:80px;
height:30px;
text-align:center;
}
input[type="text"]{
width:80%;
height:25px;
font-size:18px;
}
input[type="password"]{
width:80%;
height:25px;
font-size:18px;
}
input[type="password"]{
width:80%;
height:25px;
font-size:18px;
}
#list{
list-style:none;
}
#list li{
display:inline-block;
}
#list li input[type="text"]{
width: 28px;
border: 0px;
text-align: center;
}
#list li #result1{
width:80px;
border:solid 2px #ccc;
}
</style>
</head>
<body onload="myFunction()">
<script>
function validation(){
var x = document.getElementById("user_name").value;
if(x==""){
alert("Please Enter Your Name");
return
}
var y = document.getElementById("E-mail").value;
if(y==""){
alert("Please Enter Your E-mail");
return
}
var z = document.getElementById("Pswd").value;
if(z==""){
alert("Please Enter Your Password");
return
}
var a = document.getElementById("Cpswd").value;
if(a==""){
alert("Please Enter Your Conform Password");
return
}
if(a!=z){
alert("Conform Password D'nt Match");
return
}
//add captcha
var b = document.getElementById("numf").value;
var c = document.getElementById("nums").value;
var d = Number(b) + Number(c);
var e = document.getElementById("result1").value;
if(e!=d){
alert("Please fill correct captcha");
}
else{
}
} function myFunction() {
var b = Math.floor((Math.random() * 10) + 1);
document.getElementById("numf").value = b;
var c = Math.floor((Math.random() * 10) + 1);
document.getElementById("nums").value = c;
}
</script>
<form>
<table align="center" width="800px" border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<td height="50px" bgcolor="#ccc" align="center" colspan="2">
<h2> JavaScript Validation Form </h2>
</td>
</tr>
<tr>
<td>
<label> <b style="font-size:20px;"> Enter your Name </b> </label>
</td>
<td>
<input type="text" id="user_name" placeholder="Enter Your Name"></td>
</tr>
<tr>
<td>
<label> <b style="font-size:20px;"> E-mail Id</b> </label>
</td>
<td>
<input type="text" id="E-mail" placeholder="Enter Your E-mail Id"></td>
</tr>
<tr>
<td>
<label> <b style="font-size:20px;"> Password </b> </label>
</td>
<td>
<input type="password" id="Pswd" placeholder="Enter Your password"></td>
</tr>
<tr>
<td>
<label> <b style="font-size:20px;"> Conform Password </b> </label>
</td>
<td>
<input type="password" id="Cpswd" placeholder="Enter Your Conform password"></td>
</tr>
<tr>
<td>
<label> <b style="font-size:20px;"> Please Check </b> </label>
</td>
<td>
<ul id="list">
<li> <input type="text" id="numf" disabled> </li>
<li> <p> + </p> </li>
<li> <input type="text" id="nums" disabled></li>
<li> <p> = </p> </li>
<li> <input type="text" id="result1"> </li>
</ul>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" onclick="validation()" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Post A Comment
No comments :
Thanks For visiting Infotech Solutuion Blog