<div id="emptyDiv">
</div>
<div id="description">
</div>
<!--container start-->
<div id="container">
  <div id="container_body">
    <div>
      <h2 class="form_title">
User Registration Form</h2>
<div class="head_para">
Form Validated Using jquery</div>
</div>
<!--Form  start-->
    <div id="form_name">
      <div class="firstnameorlastname">
       <form name="form">
       <div id="errorBox">
</div>
<input name="Name" class="input_name" id="name" type="text" placeholder="First Name" value="">
        <input name="LastName" class="input_name" id="lname" type="text" placeholder="Last Name" value="">
      </form>
</div>
<div id="email_form">
        <input name="Email" class="input_email" id="femail" type="text" placeholder="Your Email" value="">
      </div>
<div id="Re_email_form">
        <input name="enterEmail" class="input_Re_email" id="reemail" type="text" placeholder="Re-enter Email" value="">
      </div>
<div id="password_form">
        <input name="Password" class="input_password" id="pass" type="password" placeholder="New Password" value="">
      </div>
<!--birthday details start-->
      <div>
        <h3 class="birthday_title">
Birthday</h3>
</div>
<div>
        <select name="birthday_month" id="month">
          <option value="" selected="">Month</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
        </select>    

        <select name="birthday_day" id="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" id="year">
          <option value="" selected="">Year</option>
          <option value="2013">2013</option>
          <option value="2012">2012</option>
          <option value="2011">2011</option>
          <option value="2010">2010</option>
          <option value="2009">2009</option>
        </select>
      </div>
<!--birthday details ends-->
      <div id="radio_button">
        <input name="radiobutton" id="radio_button" type="radio" value="Female">
        <label>Female</label>   
        <input name="radiobutton" id="radio_button" type="radio" value="Male">
        <label>Male</label>
      </div>
<div>
      <div id="sign_user" onclick="Submit()">
Sign Up </div>
</div>
</div>
</div>
</div>
*{
 margin:0px;
 padding:0px;
 }
body{
 font-family:Tahoma, Geneva, sans-serif;
  margin-top: 12%;
 }
#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;
 }
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');
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js