<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');
}
}
This Pen doesn't use any external CSS resources.