Here I show how to validate Email,Phone No. and how to check confirm password match with entered password.
If Information is not correctly entered in there corresponding fields then error shown in form of hint in corresponding fields.
Here is My Code.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function validateForm(){
var nameId=document.getElementById("text_name");
var emailId=document.getElementById("text_email");
var phoneId=document.getElementById("text_phone");
var passwordId=document.getElementById("text_password");
var confirmId=document.getElementById("text_confirm_password");
var name=nameId.value;
var email=emailId.value;
var phone=phoneId.value;
var password=passwordId.value;
var confirmPassword=confirmId.value;
if(name==null||name==""){
nameId.placeholder="Enter Name Here";
nameId.focus();
}else if(email==null||email==""){
emailId.placeholder="Enter Email Here";
emailId.focus();
}else if(phone==null||phone==""){
phoneId.placeholder="Enter Phone Number Here";
phoneId.focus();
}else if(password==null||password==""){
passwordId.placeholder="Enter Password Here";
passwordId.focus();
}else if(confirmPassword==null||confirmPassword==""){
confirmId.placeholder="Enter Confirm Password Here";
confirmId.focus();
}else if(emailCheck(email)==false){
emailId.value="";
emailId.placeholder="Enter Valid Email Here";
emailId.focus();
}else if(checkPhone(phone)==false){
phoneId.value="";
phoneId.placeholder="Enter Valid Phone Here";
phoneId.focus();
}else if(checkPassword(password,confirmPassword)==false){
confirmId.value="";
confirmId.placeholder="Password are not Same";
confirmId.focus();
}
}
var str;
function emailCheck(str)
{
var at="@";
var dat=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldat=str.indexOf(dat);
if(str.indexOf(at)==-1||str.indexOf(at)==0||str.indexOf(at)==lstr)
{
return false;
}
else if(str.indexOf(dat)==-1||str.indexOf(dat)==0||str.indexOf(dat)==lstr)
{
return false;
}
else if(str.indexOf(at,lat+1)!=-1)
{
return false;
}
else if(str.substring(lat-1,lat)==dat||str.substring(lat+1,lat+2)==dat)
{
return false;
}
else if(str.indexOf(dat,lat+2)==-1)
{
return false;
}
else if(str.indexOf(" ")!=-1)
{
return false;
}
else
return true;
}
var phoneStr;
function checkPhone(phoneStr){
if(!parseInt(phoneStr)){
return false;
}else if(phoneStr.length<10||phoneStr.length>10){
return false;
}else{
return true;
}
}
var confirmStr,passStr;
function checkPassword(passStr,confirmStr){
if(passStr!=confirmStr){
return false;
}else{
return true;
}
}
function goBackFunction(){
window.location.href="index.html";
}
</script>
<style type="text/css">
body {
background-image: url(images/background.png);
}
.text_label { font-family: "Times New Roman", Times, serif;
font-size: 45px;
font-weight: bolder;
color: #FFF;
}
.button_send { font-family: "Times New Roman", Times, serif;
font-size: 40px;
font-weight: bold;
color: #FFF;
background-color: #9ab13f;
height: 55px;
width: 500px;
}
.text_input {
font-family: "Times New Roman", Times, serif;
font-size: 45px;
font-weight: 200;
height: 50px;
}
</style>
</head>
<body>
<div style="position: absolute; height: 76px; width: 765px; left: 0px; top: 2px; background-image: url(images/title_bar_large.png)">
<div style="position: absolute; height: 51px; width: 120px; left: 21px; top: 11px;"> <img src="images/btn_back.png" width="121" height="51" alt="Back Button" onclick="goBackFunction();" /></div>
<div class="text_label" style="position: absolute; height: 43px; width: 242px; left: 246px; top: 12px;">Registration</div>
</div>
<div style="position: absolute; height: 1017px; width: 665px; background-color: #E0E0E0; left: 53px; top: 113px;">
<form method="post" name="forget_password" id="forget_password">
<table width="521" height="814" align="center">
<tr>
<td height="109" align="center"><input name="text_name" type="text" class="text_input" id="text_name" placeholder="Name" size="30" /></td>
</tr>
<tr>
<td height="139" align="center"><input name="text_name2" type="text" class="text_input" id="text_email" placeholder="Email" size="30" /></td>
</tr>
<tr>
<td height="140" align="center"><input name="text_name3" type="text" class="text_input" id="text_phone" placeholder="Telephone Number" size="30" /></td>
</tr>
<tr>
<td height="153" align="center"><input name="text_name4" type="password" class="text_input" id="text_password" placeholder="Password" size="30" /></td>
</tr>
<tr>
<td height="151" align="center"><input name="text_email" type="password" class="text_input" id="text_confirm_password" placeholder="Confirm Password" size="30" /></td>
</tr>
<tr>
<td align="center"><input name="button_send" type="button" class="button_send" id="button_submit" value="Submit" onclick="validateForm();" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
If Information is not correctly entered in there corresponding fields then error shown in form of hint in corresponding fields.
Here is My Code.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function validateForm(){
var nameId=document.getElementById("text_name");
var emailId=document.getElementById("text_email");
var phoneId=document.getElementById("text_phone");
var passwordId=document.getElementById("text_password");
var confirmId=document.getElementById("text_confirm_password");
var name=nameId.value;
var email=emailId.value;
var phone=phoneId.value;
var password=passwordId.value;
var confirmPassword=confirmId.value;
if(name==null||name==""){
nameId.placeholder="Enter Name Here";
nameId.focus();
}else if(email==null||email==""){
emailId.placeholder="Enter Email Here";
emailId.focus();
}else if(phone==null||phone==""){
phoneId.placeholder="Enter Phone Number Here";
phoneId.focus();
}else if(password==null||password==""){
passwordId.placeholder="Enter Password Here";
passwordId.focus();
}else if(confirmPassword==null||confirmPassword==""){
confirmId.placeholder="Enter Confirm Password Here";
confirmId.focus();
}else if(emailCheck(email)==false){
emailId.value="";
emailId.placeholder="Enter Valid Email Here";
emailId.focus();
}else if(checkPhone(phone)==false){
phoneId.value="";
phoneId.placeholder="Enter Valid Phone Here";
phoneId.focus();
}else if(checkPassword(password,confirmPassword)==false){
confirmId.value="";
confirmId.placeholder="Password are not Same";
confirmId.focus();
}
}
var str;
function emailCheck(str)
{
var at="@";
var dat=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldat=str.indexOf(dat);
if(str.indexOf(at)==-1||str.indexOf(at)==0||str.indexOf(at)==lstr)
{
return false;
}
else if(str.indexOf(dat)==-1||str.indexOf(dat)==0||str.indexOf(dat)==lstr)
{
return false;
}
else if(str.indexOf(at,lat+1)!=-1)
{
return false;
}
else if(str.substring(lat-1,lat)==dat||str.substring(lat+1,lat+2)==dat)
{
return false;
}
else if(str.indexOf(dat,lat+2)==-1)
{
return false;
}
else if(str.indexOf(" ")!=-1)
{
return false;
}
else
return true;
}
var phoneStr;
function checkPhone(phoneStr){
if(!parseInt(phoneStr)){
return false;
}else if(phoneStr.length<10||phoneStr.length>10){
return false;
}else{
return true;
}
}
var confirmStr,passStr;
function checkPassword(passStr,confirmStr){
if(passStr!=confirmStr){
return false;
}else{
return true;
}
}
function goBackFunction(){
window.location.href="index.html";
}
</script>
<style type="text/css">
body {
background-image: url(images/background.png);
}
.text_label { font-family: "Times New Roman", Times, serif;
font-size: 45px;
font-weight: bolder;
color: #FFF;
}
.button_send { font-family: "Times New Roman", Times, serif;
font-size: 40px;
font-weight: bold;
color: #FFF;
background-color: #9ab13f;
height: 55px;
width: 500px;
}
.text_input {
font-family: "Times New Roman", Times, serif;
font-size: 45px;
font-weight: 200;
height: 50px;
}
</style>
</head>
<body>
<div style="position: absolute; height: 76px; width: 765px; left: 0px; top: 2px; background-image: url(images/title_bar_large.png)">
<div style="position: absolute; height: 51px; width: 120px; left: 21px; top: 11px;"> <img src="images/btn_back.png" width="121" height="51" alt="Back Button" onclick="goBackFunction();" /></div>
<div class="text_label" style="position: absolute; height: 43px; width: 242px; left: 246px; top: 12px;">Registration</div>
</div>
<div style="position: absolute; height: 1017px; width: 665px; background-color: #E0E0E0; left: 53px; top: 113px;">
<form method="post" name="forget_password" id="forget_password">
<table width="521" height="814" align="center">
<tr>
<td height="109" align="center"><input name="text_name" type="text" class="text_input" id="text_name" placeholder="Name" size="30" /></td>
</tr>
<tr>
<td height="139" align="center"><input name="text_name2" type="text" class="text_input" id="text_email" placeholder="Email" size="30" /></td>
</tr>
<tr>
<td height="140" align="center"><input name="text_name3" type="text" class="text_input" id="text_phone" placeholder="Telephone Number" size="30" /></td>
</tr>
<tr>
<td height="153" align="center"><input name="text_name4" type="password" class="text_input" id="text_password" placeholder="Password" size="30" /></td>
</tr>
<tr>
<td height="151" align="center"><input name="text_email" type="password" class="text_input" id="text_confirm_password" placeholder="Confirm Password" size="30" /></td>
</tr>
<tr>
<td align="center"><input name="button_send" type="button" class="button_send" id="button_submit" value="Submit" onclick="validateForm();" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
No comments:
Post a Comment