We Keep Coding

jQuery How To Add Form Validation Using 5-step Sliding Form

I'm a newbie and find very difficult to read and understand complex javascript from other's work.
I would like to ask some help in making a simplified jquery for me to use rather than using the complex code which I don't really understand.
First: this is a 5 step form consist of gender, first name, dob, email and password. There are validations in every steps.
See the complex code:
<script>
$(document).ready(function () {
var Fist = {
config: {
stepsSelector: $(".steps"),
nextSelector: $(".myButton"),
errorSelector: $(".error"),
indSelector: $(".steps-ind"),
form: "",
cur_step: 1,
max_step: 1,
offset: 278,
errorString: "This field is required",
clickEvent: "touchstart"
},
run: function(e) {
this.config.form = e;
var t = this;
var n = $(".regform").width();
t.config.offset = n;
if (typeof document.body.ontouchstart === "undefined") {
t.config.clickEvent = "click"
}
t.config.indSelector.find(".step-ind" + t.config.cur_step).addClass("step-ind-active");
t.config.nextSelector.on(t.config.clickEvent, function() {
t.process()
});
t.config.form.find("input").on("keypress", function(e) {
var n = e.keyCode ? e.keyCode : e.which;
if (n === 13) {
t.process()
}
});
t.config.indSelector.find("div").on(t.config.clickEvent, function() {
t.gotoStep($(this))
})
},
indicateStep: function(e) {
var t = this;
t.config.indSelector.find("div").removeClass("step-ind-active");
t.config.indSelector.find(".step-ind" + e).addClass("step-ind-active");
setTimeout(function() { $('.step'+e+' input, .step'+e+' select').focus() }, 500);
},
animateStep: function(e) {
var t = this;
t.config.stepsSelector.css({
transform: "translateX(-" + (e - 1) * t.config.offset + "px)"
}, function() {
t.config.form.find(".step" + e).find("input").focus()
})
},
process: function() {
var e = this;
var t = e.config.form.find(".step" + e.config.cur_step).find("input,select");
var n = false;
t.each(function() {
if (!e.validate($(this))) {
n = true
}
});
if (!n) {
e.config.cur_step++;
if (e.config.cur_step === 6) {
e.config.form.submit()
} else {
e.config.max_step = e.config.cur_step;
e.animateStep(e.config.cur_step);
e.indicateStep(e.config.cur_step);
if (e.config.cur_step === 5) {
e.config.nextSelector.val("Submit")
}
}
}
},
gotoStep: function(e) {
var t = e.text();
var n = this;
if (t < n.config.max_step) {
n.animateStep(t);
n.indicateStep(t);
n.config.cur_step = t;
if (t === 5) {
n.config.nextSelector.val("Submit")
} else {
n.config.nextSelector.val("Next")
}
} else {
n.process()
}
},
validate: function(e) {
var t = this;
t.config.errorSelector.hide();
e.removeClass("error-item");
var n = false;
if ($.trim(e.val()) === "") {
n = true;
t.config.errorString = "This field is required"
}
if (e.attr("name") === "email" && !t.validateEmail(e.val())) {
n = true;
t.config.errorString = "Invalid email address"
}
if (e.attr("name") === "firstname" && !t.validateName(e.val())) {
n = true;
t.config.errorString = "Invalid name"
}
if (n) {
t.config.errorSelector.empty().append(t.config.errorString).fadeIn("fast");
e.addClass("error-item");
return false
}
return true
},
validateEmail: function(e) {
var t = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return t.test(e)
},
validateInt: function(e) {
var t = /^\d{1,}$/;
return t.test(e)
},
validateName: function(e) {
var t = /^\w+(\s)?\w+(\s)?(\w+)?$/;
return t.test(e)
}
}
Fist.run($("#regform"));
});
Here is my HTML:
<div class="regform">
<div class="form-wrapper">
<form id="regform" method="post" action="http://www.test.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
</div>
<div class="submit">
<input type="button" class="myButton" value="Next">
</div>
<div class="steps-ind">
<div class="step-ind1">1</div>
<div class="step-ind2">2</div>
<div class="step-ind3">3</div>
<div class="step-ind4">4</div>
<div class="step-ind5">5</div>
</div>
Please help me. Thank you so much for your help!

It's simple enough to add a new button! You could either change the gender to a select dropdown or you could add a new div like this:
<div class="bro-btn" value="3">
<span>Bro</span>
<div class="bro">
<i class="fa fa-bro" aria-hidden="true"></i>
</div>
</div>
Few things you have to note: The fa fa-bro is a reference to a class in your CSS that adds an icon corresponding to whatever gender is selected. If you were to add new buttons like above, you would have to find an icon that matches from Font Awesome.

jQuery if select is not selected add error

I'm trying to make the <select id="jobCategory"> and job <select id="industry"> fields mandatory by adding a error message.
Not sure if I have to make them also disable in order to do it properly.
My if statement doesn't work for both field.
Error message in red doesn't show.
var maleFemale = '';
$('#submitBtn').click(function() {
var errors = false;
if (maleFemale == '') {
errors = true;
$('#areYou').css('color', '#F00');
} else {
$('#areYou').css('color', '#000');
}
if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '#yourname' || $("#twitterInput").val() == '#') {
errors = true;
$('#enterTwitterHandle').css('color', '#F00');
} else {
$('#enterTwitterHandle').css('color', '#000');
}
if ($('#jobCategory option:selected').length == 0) {
alert('nothing selected');
$('#enterCategory').css('color', '#F00');
} else {
$('#enterCategory').css('color', '#000');
}
if ($('#industry option:selected').length == 0) {
alert('nothing selected');
$('#enterIndustry').css('color', '#F00');
} else {
$('#enterIndustry').css('color', '#000');
}
if (!errors) {
$('body').addClass('submitted');
}
});
#submitBtn {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
<p id='areYou'>Are you...</p>
<div id='maleFemaleSelector'>
<p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
<p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
<div style='clear:both'></div>
</div>
<p id='enterTwitterHandle'>Enter a Twitter handle</p>
<input type='text' id='twitterInput' value='#yourname' />
<div style='clear:both'></div>
<p id='enterCategory'>Select your job category</p>
<select id="jobCategory" class="select">
<option value="" disabled selected>job category</option>
<option value="it"> IT</option>
<option value="finance">Finance</option>
<option value="hr">HR</option>
<option value="marketing">Marketing</option>
<option value="security">Security</option>
<option value="developer">Developer</option>
<option value="others">Others</option>
</select>
<div style='clear:both'></div>
<p id='enterIndustry'>Select your industry</p>
<select id="industry" class="select">
<option value="" disabled selected>industry</option>
<option value="retail">Retail</option>
<option value="travel-transportation">Travel & Transportation</option>
<option value="telco-media">Telco / Media</option>
<option value="banking">Banking</option>
<option value="health-government">Health & Government</option>
<option value="energy-utilities">Energy & Utilities</option>
</select>
<p id='submitBtn'>Discover your AI iD</p>
<div style='clear:both'></div>
</div>

If you change:
if ($('#jobCategory option:selected').length == 0) {
to
if ($('#jobCategory option:selected').val() == '') {
And
if ($('#industry option:selected').length == 0)
to
if ($('#industry option:selected').val() == '')
this should work.
The original one finds the length == '12' (which is not 0) because the text inside the option is 'job category' which is 12 charactors long.
the new one will search for the values instead, which only == '' on
<option value="" disabled selected>job category</option> which is basically nothing selected.
Working example:
var maleFemale = '';
$('#submitBtn').click(function() {
var errors = false;
if (maleFemale == '') {
errors = true;
$('#areYou').css('color', '#F00');
} else {
$('#areYou').css('color', '#000');
}
if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '#yourname' || $("#twitterInput").val() == '#') {
errors = true;
$('#enterTwitterHandle').css('color', '#F00');
} else {
$('#enterTwitterHandle').css('color', '#000');
}
if ($('#jobCategory option:selected').val() == '') {
alert('nothing selected');
$('#enterCategory').css('color', '#F00');
} else {
$('#enterCategory').css('color', '#000');
}
if ($('#industry option:selected').val() == '') {
alert('nothing selected');
$('#enterIndustry').css('color', '#F00');
} else {
$('#enterIndustry').css('color', '#000');
}
if (!errors) {
$('body').addClass('submitted');
}
});
#submitBtn {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
<p id='areYou'>Are you...</p>
<div id='maleFemaleSelector'>
<p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
<p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
<div style='clear:both'></div>
</div>
<p id='enterTwitterHandle'>Enter a Twitter handle</p>
<input type='text' id='twitterInput' value='#yourname' />
<div style='clear:both'></div>
<p id='enterCategory'>Select your job category</p>
<select id="jobCategory" class="select">
<option value="" disabled selected>job category</option>
<option value="it"> IT</option>
<option value="finance">Finance</option>
<option value="hr">HR</option>
<option value="marketing">Marketing</option>
<option value="security">Security</option>
<option value="developer">Developer</option>
<option value="others">Others</option>
</select>
<div style='clear:both'></div>
<p id='enterIndustry'>Select your industry</p>
<select id="industry" class="select">
<option value="" disabled selected>industry</option>
<option value="retail">Retail</option>
<option value="travel-transportation">Travel & Transportation</option>
<option value="telco-media">Telco / Media</option>
<option value="banking">Banking</option>
<option value="health-government">Health & Government</option>
<option value="energy-utilities">Energy & Utilities</option>
</select>
<p id='submitBtn'>Discover your AI iD</p>
<div style='clear:both'></div>
</div>
An alternative (but not recommended) is to search for the text itself inside the option:selected.
Like this:
if ($('#jobCategory option:selected').text == 'job category') {

html get Method sending wrong url

on using html get method my url should be shown as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text=10.1.17.20&subquery=&subfilter=&sub_search_text=
but it shows as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=
there is a plus sign between query=ip&filter=like&search_text+=10.1.17.20
which creates problem in getting data
my html form code is like
<form method="get" action="log_table_view.php" onsubmit="return submit_query_form_check();" enctype="multipart/form-data">
<label>Log for Year</label>
<select id="year" name="year">
<option value="">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<br>
<label>From</label>
<select id="frommonth" name="frommonth">
<option value="">Select Month</option>
</select>
<select id="fromdate" name="fromdate">
<option value="">Select Date</option>
</select>
<label>To</label>
<select id="tomonth" name="tomonth">
<option value="">Select Month</option>
</select>
<select id="todate" name="todate">
<option value="">Select Date</option>
</select>
<br>
<label>Query</label>
<select name="query" id="query">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="filter" id="filter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="search_text" id="search_text">
<label>AND</label>
<label>Sub-Query</label>
<select name="subquery" id="subquery">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="subfilter" id="subfilter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
<button type="submit" class="search">Search</button>
</form>
function submit_query_form_check() {
var year = $("#year").val();
var frommonth = $('#frommonth').val();
var fromdate = $('#fromdate').val();
var tomonth = $('#tomonth').val();
var todate = $('#todate').val();
var query = $('#query').val();
var subquery = $('#subquery').val();
if (year == "") {
alert("Year Not Selected");
$("#year").focus();
return false;
}
if (frommonth == "") {
alert("From Month Not Selected");
$("#frommonth").focus();
return false;
}
if (fromdate == "") {
alert("From date Not Selected");
$("#fromdate").focus();
return false;
}
if (tomonth == "") {
alert("To Month Not Selected");
$("#tomonth").focus();
return false;
}
if (todate == "") {
alert("To date Not Selected");
$("#todate").focus();
return false;
}
if (query != "") {
var filter = $('#filter').val();
var search_text = $('#search_text').val();
if (filter == "") {
alert("You have not selected any filter for query");
$('#filter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any search text for query");
$('#search_text').focus();
return false;
} else if (query == "groupname") {
if (filter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#filter').focus();
return false;
}
}
}
if (subquery != "") {
var subfilter = $('#subfilter').val();
var sub_search_text = $('#sub_search_text').val();
if (query == "") {
alert("You have not selected any for query before using sub query");
$('#query').focus();
return false;
}
if (subfilter == "") {
alert("You have not selected any sub filter for query");
$('#subfilter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any sub search text for query");
$('#sub_search_text').focus();
return false;
} else if (subquery == "groupname") {
if (subfilter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#subfilter').focus();
return false;
}
}
}
return true;
}

Right before you actually pass in the string to be called to the endpoint, just strip the '+' out of the URL using the str_replace method.
<?
$badUrl = "http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=";
$goodUrl = str_replace('?/', '?', $badUrl);
then you simply pass the goodUrl to make the GET request

How to hide\show specific value of option based on another selected option by JQuery?

I Have html select form like this:
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.
How to solve that condition by using jQuery?

You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,
Please have a look on the code below:
$(function() {
$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 2) {
var arr = ['house', 'money'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 3) {
var arr = ['plane', 'wife'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else {
$('#id_choices option').each(function(i) {
$(this).css('display', 'inline-block');
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option disabled selected>Select</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house' >house</option>
<option value='money' >money</option>
<option value='plane' >plane</option>
<option value='wife' >wife</option>
</select>
Hope this helps!

You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.
Working Example:
$(document).ready(function(){
var car = '<option value="car">car</option>';
var bike = '<option value="bike">bike</option>';
var house = '<option value="house">house</option>';
var money = '<option value="money">money</option>';
var plane = '<option value="plane">plane</option>';
var wife = '<option value="wife">wife</option>';
function options1() {
$('#id_choices').append(car);
$('#id_choices').append(bike);
}
function options2() {
$('#id_choices').append(house);
$('#id_choices').append(money);
}
function options3() {
$('#id_choices').append(plane);
$('#id_choices').append(wife);
}
function displayOptions() {
$('#id_choices option').remove();
switch ($('#id_num option:selected' ).text()) {
case('1') : options1(); break;
case('2') : options2(); break;
case('3') : options3(); break;
case('all') : options1(); options2(); options3(); break;
}
}
$('#id_num').change(function(){displayOptions();});
displayOptions();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:
var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');
function displayOptions() {
var optionSet1 = ['car', 'bike'];
var optionSet2 = ['house', 'money'];
var optionSet3 = ['plane', 'wife'];
var oldOptions = choices.getElementsByTagName('option');
var selected = numbers.options[numbers.selectedIndex].text;
while (oldOptions.length > 0) {
choices.removeChild(oldOptions[0]);
}
switch (selected) {
case('1') : var optionSet = optionSet1; break;
case('2') : optionSet = optionSet2; break;
case('3') : optionSet = optionSet3; break;
case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
}
for (var i = 0; i < optionSet.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',optionSet[i]);
option.textContent = optionSet[i];
choices.appendChild(option);
}
}
numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>

Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out

there may be a better way, however this does work.. you can also add hide/display classes to any other elements
$(document).ready(function () { $('#id_num').on('change', change) });
function change() {
$('#id_choices > option').hide();
$($(this).find(':selected').attr('clssval')).show();
}
.sel{display:none;}
.num1{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1' clssval=".num1">1</option>
<option value='2' clssval=".num2">2</option>
<option value='3' clssval=".num3">3</option>
<option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car' class="sel num1">car</option>
<option value='bike' class="sel num1">bike</option>
<option value='house' class="sel num2">house</option>
<option value='money' class="sel num2">money</option>
<option value='plane' class="sel num3">plane</option>
<option value='wife' class="sel num3">wife</option>
</select>

Date of Birth Validation for month of february

I have kept three drop down boxes for DATE, MONTH and YEAR. I want a validation function that will return false if the day entered is more than 29 for the month of FEB. If it is a leap year, it should accept 29 for FEB. I used the following JavaScript.
It is prompting even if I enter values 27,28 in the date field. Can you just help me out with this?
Here is the JavaScript code..
var myDayStr = document.UserReg.Date.value;
var myMonthStr = document.UserReg.Month.value;
var myYearStr = document.UserReg.Year.value;
var myMonth = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
var validMonthLength = ['',31,28,31,30,31,30,31,31,30,31,30,31];
var myDateStr = myDayStr + ' ' + myMonthStr + ' ' + myYearStr;
var myDate = new Date();
myDate.setFullYear( myYearStr, myMonthStr, myDayStr );
if ( myDate.getMonth() != myMonthStr ) {
alert( ' sorry, but "' + myDateStr + '" is NOT a valid date of birth.' );
return false;
}
var testDate = new Date(myYearStr,(myMonthStr-1),myDateStr);
if ( (myMonthStr == '02') && (myDateStr != testDate.getDate()) ) {
alert("There is no dates above 28 in February of "+myYearStr);
return false;
}
if (myMonthStr != 2) {
if (myDateStr > validMonthLength[myMonthStr])
{
alert("Invalid date for month chosen");
return false; }
}

setFullYear automatically re-aligns the months if you put in a number of days greater than the number of days allowed in a month. for example:
date = new Date();
date.setFullYear('2012','2','35');
date.getMonth(); //returns 3
date.getDay(); // returns 3
So what you do is set up the date like you do then just do a straight comparison. Keep it simple.

i created manually u can try, its working
function isleap(year) {
var yr = year;
if ((parseInt(yr) % 4) == 0) {
if (parseInt(yr) % 100 == 0) {
if (parseInt(yr) % 400 != 0) {
//alert("Not Leap");
return false;
}
if (parseInt(yr) % 400 == 0) {
//alert("Leap");
return true;
}
}
if (parseInt(yr) % 100 != 0) {
//alert("Leap");
return true;
}
}
if ((parseInt(yr) % 4) != 0) {
//alert("Not Leap");
return false;
}
}
function dayChange() {
var Year = document.getElementById('<%=ddlYear.ClientID %>');
var Month = document.getElementById('<%=ddlMonth.ClientID %>');
var Day = document.getElementById('<%=ddlDay.ClientID %>');
if (Day.options[Day.selectedIndex].value == 0) {
Day.style.border = '1px solid red';
}
else {
Day.style.border = '1px solid green';
}
}
function yearChange() {
var Year = document.getElementById('<%=ddlYear.ClientID %>');
var Month = document.getElementById('<%=ddlMonth.ClientID %>');
var Day = document.getElementById('<%=ddlDay.ClientID %>');
if (Year.options[Year.selectedIndex].value == 0) {
Year.style.border = '1px solid red';
Day.style.border = '1px solid red';
Month.style.border = '1px solid red';
}
else {
Year.style.border = '1px solid green';
Day.style.border = '1px solid red';
Month.style.border = '1px solid red';
}
Day.options[0].selected = true;
Month.options[0].selected = true;
if (Day.options.length == 30) {
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
else if (Day.options.length == 29) {
$('#ddlDay').append("<option >29</option>");
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
}
function monthChange() {
var isLeap;
var Day = document.getElementById('<%=ddlDay.ClientID %>');
var Month = document.getElementById('<%=ddlMonth.ClientID %>');
var Year = document.getElementById('<%=ddlYear.ClientID %>');
Month.style.border = '1px solid red';
Day.options[0].selected = true;
Day.style.border = '1px solid red';
if (Month.options[Month.selectedIndex].value == 0) {
Month.style.border = '1px solid red';
Day.options[0].selected = true;
Day.style.border = '1px solid red';
}
else if (Month.options[Month.selectedIndex].value == 2) {
Month.style.border = '1px solid green';
if (isleap(Year.value) == true) {
isLeap = 'true';
Day.options['31'].remove();
Day.options['30'].remove();
Day.options[0].selected = true;
Day.style.border = '1px solid red';
Month.style.border = '1px solid green';
}
else {
Day.options['31'].remove();
Day.options['30'].remove();
Day.options['29'].remove();
Day.options[0].selected = true;
Day.style.border = '1px solid red';
Month.style.border = '1px solid green';
}
Day.options[0].selected = true;
Day.style.border = '1px solid red';
Month.style.border = '1px solid green';
}
else {
if (Day.options.length == 29) {
$('#ddlDay').append("<option >29</option>");
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
else if (Day.options.length == 30) {
$('#ddlDay').append("<option >30</option>");
$('#ddlDay').append("<option >31</option>");
}
Month.style.border = '1px solid green';
}
}

<form id="dob_form">
<select name="Year" id="year">
<option> Year</option>
<option></option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
</select>
<select name="Month" id="month" disabled="disabled">
<option></option>
<option> Month</option>
<option></option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="Day" id="day" disabled="disabled">
<option></option>
<option> Day</option>
<option></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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option id="29" value="29">29</option>
<option id="30" value="30">30</option>
<option id="31" value="31">31</option>
</select>
</form>
$(document).ready(function(){
$("#year").change(function(){
var year = $("#year").val();
if(year!="" && year!="Year"){
$("#month").removeAttr('disabled');
$("#month").val('Month');
}
else{
$("#month").attr('disabled', true);
$("#month").val('');
$("#day").attr('disabled', true);
$("#day").val('');
}
});
$("#month").change(function(){
var month = $("#month").val();
var year = $("#year").val();
if(month!="" && month!="Month"){
$("#day").removeAttr('disabled');
$("#day").val('Day');
if(month=="Febuary"){
var lastday = $("#day option").last().val();
$("#31").remove();
$("#30").remove();
if(year % 4 != 0){
$("#29").remove();
}else if(lastday == 28){
$("#day").append("<option id='29' value='29'>29</option>");
}
}
else if(month == "April" ||
month == "June" ||
month == "November" ||
month == "September")
{
var lastday = $("#day option").last().val();
if(lastday == 31){
$("#31").remove();
} else if(lastday == 29){
$("#day").append("<option id='30' value='30'>30</option>");
}
else if(lastday == 28){
$("#day").append("<option id='29' value='29'>29</option><option id='30' value='30'>30</option>");
}
}
else{
var lastday = $("#day option").last().val();
if(lastday == 30){
$("#day").append("<option id='31' value='31'>31</option>");
} else if(lastday == 29){
$("#day").append("<option id='30' value='30'>30</option><option id='31' value='31'>31</option>");
}
else if(lastday == 28){
$("#day").append("<option id='29' value='29'>29</option><option id='30' value='30'>30</option><option id='31' value='31'>31</option>");
}
}
}
else{
$("#day").attr('disabled', true);
$("#day").val('');
}
});
});