Registration form validation using jquery with example ~ Web CodeHelpers

Registration form validation using jquery with example

User Registration form validation using javascript

in this tutorial we explained the form validation using jquery










User Registration Form Demo

Form Validated Using jquery

Birthday

     
   
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

7 comments :

Subscribe updates via Email