User Registration form validation using javascript
in this tutorial we explained the form validation using jquery
in this tutorial we explained the form validation using jquery
User Registration Form Demo
Form Validated Using jqueryBirthday
Sign Up
function Submit(){
var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var formemail = $("#femail").val();
var formreemail = $("#reemail").val();
var name = $("#name").val();
var lname = $("#lname").val();
var femail = $("#femail").val();
var reemail = $("#reemail").val();
var pass = $("#pass").val();
var month = $("#month").val();
var day = $("#day").val();
var year = $("#year").val();
if($("#name").val() == "" ){
$("#name").focus();
$("#errorBox").html("enter the First Name");
return false;
}else if($("#lname").val() == "" ){
$("#lname").focus();
$("#errorBox").html("enter the Last Name");
return false;
}else if($("#femail").val() == "" ){
$("#femail").focus();
$("#errorBox").html("enter the email");
return false;
}else if(!emailRegex.test(formemail)){
$("#femail").focus();
$("#errorBox").html("enter the valid email");
return false;
}else if($('#reemail').val() == ""){
$("#reemail").focus();
$("#errorBox").html("re enter the email");
return false;
}else if(!emailRegex.test(formreemail)){
$("#reemail").focus();
$("#errorBox").html("re enter the valid email");
return false;
}else if(reemail != femail){
$("#reemail").focus();
$("#errorBox").html("emails are not matching, re-enter again");
return false;
}else if($('#pass').val() == ""){
$("#pass").focus();
$("#errorBox").html("Enter the password");
return false;
}else if($('#month').val() == ""){
$("#month").focus();
$("#errorBox").html("Select Month");
return false;
}else if($('#day').val() == ""){
$("#day").focus();
$("#errorBox").html("Select day");
return false;
}else if($('#year').val() == ""){
$("#year").focus();
$("#errorBox").html("Select Year");
return false;
}else if($('input[name=radiobutton]:checked').length<=0){
$("#errorBox").html("Select gender");
return false;
}else if($(name != '' && lname != '' && femail != '' && reemail != '' && pass != '' && month != '' && day != '' && year != '')){
$("#errorBox").html("form submitted successfully")
}
}
*{
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:#3B5998;
padding:10px;
margin-top:10px;
cursor: pointer;
}
#errorBox{
color:#F00;
}
Author
V S NageswaraRao
UI Developer
Hyderabad
