...

View Full Version : validation of drop down list...



homerUK
06-04-2003, 12:08 PM
Hey,

I have three fields (drop down lists):

day (selected default value = "day")
month (selected default value = "month")
year (selected default value = "year")

the values of which are fairly obvious....!!

I need some sort of validation which says.. if one of the lists is not equal to their default selected value, then alert for the other fields to be completed.

For example, I select option "31" from the day drop down list.. I need some code to say, "OK, you've selected a date, but not a month or a year..so go and do that" ... and vice versa... so if the user selected a year, but not a day or a month... etc

..... can any one help me with this one please?!! Thanks!!

arnyinc
06-04-2003, 02:39 PM
<html>
<head>
<script language="javascript">
function check_dates(test){
error_msg="";
if ((test.my_month.options[test.my_month.selectedIndex].text)=="month")
error_msg="Enter a month";
if ((test.my_day.options[test.my_day.selectedIndex].text)=="day")
error_msg+="\nEnter a day";
if ((test.my_year.options[test.my_year.selectedIndex].text)=="year")
error_msg+="\nEnter a year";

if (error_msg=="")
return true;
else{
alert(error_msg);
return false;
}
}
</script>
</head>
<body>
<form name="testform" onsubmit="return check_dates(this);">
<select name="my_month">
<option>month</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="my_day">
<option>day</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="my_year">
<option>year</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
<input type="submit">
</form>
</body>
</html>

cheesebagpipe
06-04-2003, 07:43 PM
You'll also probably want filtering of the number of days per month, and adjustments for leap years. Depends on what the range of dates is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var numDays = {jan: 31, mar: 31, apr: 30, may: 31, jun: 30,
jul: 31, aug: 31, sep: 30, oct: 31, nov: 30, dec: 31};

function checkLeap(nYear) {
return (nYear % 4 == 0) ? 29 : 28;
}

function isDefault(oSelect) {
return oSelect[oSelect.selectedIndex].defaultSelected;
}

function setDays(oMonthSel, oDaySel, oYearSel) {
if (isDefault(oMonthSel) && isDefault(oDaySel)) return false;
var opt, oForm = oMonthSel.form;
var nDays = numDays[oMonthSel[oMonthSel.selectedIndex].value];
if (nDays == null && !isDefault(oYearSel))
nDays = checkLeap(oYearSel[oYearSel.selectedIndex].value);
var oDaySelLgth = oDaySel.length - 1;
if (nDays != oDaySelLgth) {
if (nDays<oDaySelLgth)
oDaySel.length = nDays + 1;
else {
for (var i=1; i<nDays-(oDaySelLgth-1); i++) {
opt = new Option(oDaySelLgth + i, oDaySelLgth + i);
oDaySel.options[oDaySel.length] = opt;
}
}
}
}

function checkdate(oForm) {
var oMonthSel = oForm.month, oDaySel = oForm.day, oYearSel = oForm.year;
var aStr = msg = '';
if (isDefault(oMonthSel))
msg += 'MONTH\n';
if (isDefault(oDaySel))
msg += 'DAY\n';
if (isDefault(oYearSel))
msg += 'YEAR\n';
if (msg != '' && !msg.match(/^MONTH\nDAY\nYEAR\n$/)) {
aStr = '\nPlease choose from the following:\n\n';
aStr += msg + '\n...to complete the date selection.\n\nThanks !\n\n';
alert(aStr);
oMonthSel.focus();
return false;
}
return true;
}

</script>
</head>
<body>
<hr />
<form style="width:340px;padding:5px;border:3px silver ridge;" action="javascript&#58;alert('ok')"
onsubmit="return checkdate(this)">
<strong>Date:</strong>
<select name="month" onchange="setDays(this,day,year)">
<option selected="selected">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">October</option>
<option value="nov">November</option>
<option value="dec">December</option>
</select>
<select name="day">
<option selected="selected">Day</option>
<script type="text/javascript" language="javascript">
for (var i=1; i<=31; ++i) document.write('<option value="' + i + '">' + i + '</option>');
</script>
</select>
<select name="year" onchange="setDays(month,day,this)">
<option selected="selected">Year</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>&amp;nbsp;&amp;nbsp;&amp;nbsp;
<input type="submit" value="DONE" />
</form>
<hr />
</body>
</html>

homerUK
06-05-2003, 11:04 AM
cheers guys.. I'll give it a go now..... thanks!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum