<script>
function Submit(){
var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var fname = document.form.Name.value,
lname = document.form.LastName.value,
femail = document.form.Email.value,
freemail = document.form.enterEmail.value,
fpassword = document.form.Password.value,
fmonth = document.form.birthday_month.value,
fday = document.form.birthday_day.value,
fyear = document.form.birthday_year.value;
if( fname == "" )
{
document.form.Name.focus() ;
document.getElementById("errorBox").innerHTML = "enter the first name";
return false;
}
if( lname == "" )
{
document.form.LastName.focus() ;
document.getElementById("errorBox").innerHTML = "enter the last name";
return false;
}
if (femail == "" )
{
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "enter the email";
return false;
}else if(!emailRegex.test(femail)){
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "enter the valid email";
return false;
}
if (freemail == "" )
{
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Re-enter the email";
return false;
}else if(!emailRegex.test(freemail)){
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Re-enter the valid email";
return false;
}
if(freemail != femail){
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "emails are not matching, re-enter again";
return false;
}
if(fpassword == "")
{
document.form.Password.focus();
document.getElementById("errorBox").innerHTML = "enter the password";
return false;
}
if (fmonth == "") {
document.form.birthday_month.focus();
document.getElementById("errorBox").innerHTML = "select the birthday month";
return false;
}
if (fday == "") {
document.form.birthday_day.focus();
document.getElementById("errorBox").innerHTML = "select the birthday day";
return false;
}
if (fyear == "") {
document.form.birthday_year.focus();
document.getElementById("errorBox").innerHTML = "select the birthday year";
return false;
}
if(document.form.radiobutton[0].checked == false && document.form.radiobutton[1].checked == false){
document.getElementById("errorBox").innerHTML = "select your gender";
return false;
}
if(fname != '' && lname != '' && femail != '' && freemail != '' && fpassword != '' && fmonth != '' && fday != '' && fyear != ''){
document.getElementById("errorBox").innerHTML = "form submitted successfully";
}
}
</script>
<div id="description"></div>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">User Registration Form Demo</h2>
<p class="head_para">Form Validated Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder="New Password" class="input_password">
</div>
<!--birthday details start-->
<div>
<h3 class="birthday_title">Birthday</h3>
</div>
<div>
<select name="birthday_month" >
<option value="" selected >Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select name="birthday_day" >
<option value="" selected>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="birthday_year">
<option value="" selected>Year</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
<!--birthday details ends-->
<div id="radio_button">
<input type="radio" name="radiobutton" value="Female">
<label >Female</label>
<input type="radio" name="radiobutton" value="Male">
<label >Male</label>
</div>
<div>
<p id="sign_user" onClick="Submit()">Sign Up </p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
<style>
*{
margin:0px;
padding:0px;
}
body{
font-family:Tahoma, Geneva, sans-serif;
}
#container{
width:550px;
background-color:rgba(250,250,252,.9);
margin:auto;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 0 3px #999;
}
#container_body{
padding:20px;
}
.form_title{
font-size:35px;
color:#141823;
text-align:center;
padding:10px;
font-weight:normal;
}
.head_para{
font-size:19px;
color:#99a2a7;
text-align:center;
font-weight:normal;
}
#form_name{
padding:25px 0 0 15px;
}
.firstnameorlastname{
margin-right:20px;
}
.input_name{
width:207px;
padding:5px;
font-size:18px;
}
#email_form{
clear:both;
padding:15px 0 10px 0px;
}
.input_email{
width:434px;
padding:5px;
font-size:18px;
}
#Re_email_form{
padding:10px 0 10px 0px;
}
.input_Re_email{
width:434px;
padding:5px;
font-size:18px;
}
#password_form{
padding:10px 0 10px 0px;
}
.input_password{
width:434px;
padding:5px;
font-size:18px;
}
.birthday_title{
font-size:16px;
color:#8b919d;
font-weight:normal;
padding:0 0 10px 0;
}
select{
padding:5px;
}
#birthday{
font-size:12px;
color:#8b919d;
padding-top:10px;
}
#radio_button{
padding:10px 0 0 0;
}
#sign_user{
font-size:14px;
color:#FFF;
text-align:center;
background-color:#000000;
padding:10px;
margin-top:10px;
cursor: pointer;
}
#errorBox{
color:#F00;
}
</style>
function Submit(){
var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var fname = document.form.Name.value,
lname = document.form.LastName.value,
femail = document.form.Email.value,
freemail = document.form.enterEmail.value,
fpassword = document.form.Password.value,
fmonth = document.form.birthday_month.value,
fday = document.form.birthday_day.value,
fyear = document.form.birthday_year.value;
if( fname == "" )
{
document.form.Name.focus() ;
document.getElementById("errorBox").innerHTML = "enter the first name";
return false;
}
if( lname == "" )
{
document.form.LastName.focus() ;
document.getElementById("errorBox").innerHTML = "enter the last name";
return false;
}
if (femail == "" )
{
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "enter the email";
return false;
}else if(!emailRegex.test(femail)){
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "enter the valid email";
return false;
}
if (freemail == "" )
{
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Re-enter the email";
return false;
}else if(!emailRegex.test(freemail)){
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Re-enter the valid email";
return false;
}
if(freemail != femail){
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "emails are not matching, re-enter again";
return false;
}
if(fpassword == "")
{
document.form.Password.focus();
document.getElementById("errorBox").innerHTML = "enter the password";
return false;
}
if (fmonth == "") {
document.form.birthday_month.focus();
document.getElementById("errorBox").innerHTML = "select the birthday month";
return false;
}
if (fday == "") {
document.form.birthday_day.focus();
document.getElementById("errorBox").innerHTML = "select the birthday day";
return false;
}
if (fyear == "") {
document.form.birthday_year.focus();
document.getElementById("errorBox").innerHTML = "select the birthday year";
return false;
}
if(document.form.radiobutton[0].checked == false && document.form.radiobutton[1].checked == false){
document.getElementById("errorBox").innerHTML = "select your gender";
return false;
}
if(fname != '' && lname != '' && femail != '' && freemail != '' && fpassword != '' && fmonth != '' && fday != '' && fyear != ''){
document.getElementById("errorBox").innerHTML = "form submitted successfully";
}
}
</script>
<div id="description"></div>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">User Registration Form Demo</h2>
<p class="head_para">Form Validated Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder="New Password" class="input_password">
</div>
<!--birthday details start-->
<div>
<h3 class="birthday_title">Birthday</h3>
</div>
<div>
<select name="birthday_month" >
<option value="" selected >Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select name="birthday_day" >
<option value="" selected>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="birthday_year">
<option value="" selected>Year</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
<!--birthday details ends-->
<div id="radio_button">
<input type="radio" name="radiobutton" value="Female">
<label >Female</label>
<input type="radio" name="radiobutton" value="Male">
<label >Male</label>
</div>
<div>
<p id="sign_user" onClick="Submit()">Sign Up </p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
<style>
*{
margin:0px;
padding:0px;
}
body{
font-family:Tahoma, Geneva, sans-serif;
}
#container{
width:550px;
background-color:rgba(250,250,252,.9);
margin:auto;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 0 3px #999;
}
#container_body{
padding:20px;
}
.form_title{
font-size:35px;
color:#141823;
text-align:center;
padding:10px;
font-weight:normal;
}
.head_para{
font-size:19px;
color:#99a2a7;
text-align:center;
font-weight:normal;
}
#form_name{
padding:25px 0 0 15px;
}
.firstnameorlastname{
margin-right:20px;
}
.input_name{
width:207px;
padding:5px;
font-size:18px;
}
#email_form{
clear:both;
padding:15px 0 10px 0px;
}
.input_email{
width:434px;
padding:5px;
font-size:18px;
}
#Re_email_form{
padding:10px 0 10px 0px;
}
.input_Re_email{
width:434px;
padding:5px;
font-size:18px;
}
#password_form{
padding:10px 0 10px 0px;
}
.input_password{
width:434px;
padding:5px;
font-size:18px;
}
.birthday_title{
font-size:16px;
color:#8b919d;
font-weight:normal;
padding:0 0 10px 0;
}
select{
padding:5px;
}
#birthday{
font-size:12px;
color:#8b919d;
padding-top:10px;
}
#radio_button{
padding:10px 0 0 0;
}
#sign_user{
font-size:14px;
color:#FFF;
text-align:center;
background-color:#000000;
padding:10px;
margin-top:10px;
cursor: pointer;
}
#errorBox{
color:#F00;
}
</style>
No comments:
Post a Comment