PDA

View Full Version : Validate valid date form with dropdown boxes



BertL
01-20-2010, 12:30 PM
Hey everyone,

I'm working on a website where users can add films to a film directory through a form. One of the fields that can be filled in is a "Release date" field, where a correct release date can be filled in. The form uses dropdown boxes for selecting the date; this is much less confusing in terms of how to format the date than if one would just use a text input field. Here's a screen shot:
http://www.majhost.com/gallery/BertL/stuff2/10-01/selectdate.png

I've been looking for a Javascript script that does three things:
1) Validate the entered date (i.e. no "31st of February" dates).
2) Check whether the date entered doesn't exceed today's date (so no release date in the future is allowed). This could be combined with PHP to find the today date.
3) If the "I don't know the release date" box is checked, simply skip the whole validation process (no need to validate something that won't be used).

I've been looking for Javascript code that does this, and I found a couple of scripts (like this one) (http://www.smartwebby.com/DHTML/date_validation.asp), but they all make use of text input fields where the user has to input it in a certain format (mm/dd/yyyy et cetera). This is not what I'm looking for, but having zero knowledge of Javascript I am completely unable to write my own code or adapt this code to what I want.

I already figured out the PHP that does all of the above, but I would also very much like to have some code that checks the date before the data is processed so that users who have made a mistake don't have to fill in the whole form a second time.

Could anybody help me out with the code here?

- BertL

PS I donīt know much about forum etiquette or anything like that, I just joined. If it's rude for to just register and ask for other people to code their stuff for me, please let me know. :)

Philip M
01-20-2010, 01:17 PM
This should move you forward:


<script type = "text/javascript">

function checkValidDate(yr,mmx,dd) {
mm = mmx-1; // remember that in Javascript date objects the months are 0-11
var nd = new Date();
nd.setFullYear(yr,mm,dd); // format YYYY,MM(0-11),DD
var ndmm = nd.getMonth();
if (ndmm != mm) {
alert (dd + "/" + mmx + "/" + yr + " is an Invalid Date!");
return false;
}
else {
alert (dd + "/" + mmx + "/" + yr + " is a Valid Date");
}

// date is valid - is it after today?

var now = new Date().getTime();
var selectedDate = nd.getTime();
if (selectedDate > now) { // not before today's date
alert ("Invalid date - must not be after today");
return false;
}
else {
alert ("Date is valid - before today's date");
return true;
}
}

checkValidDate(2009,2,31) // EXAMPLE: 31st February 2009

</script>

Naturally you will not call the function if the "I don't know the release date " box is checked. It is for you to pass the year, month, day values from the select boxes into the function.

But if "having zero knowledge of Javascript I am completely unable to write my own code or adapt this code to what I want" you may still have problems, although the purpose of this forum is to offer help. Presumably you would not attempt to service or repair a machine or appliance without any experience or understanding of how it worked.




My thanks and commiserations to the other contestants, and to you for listening. - Quizmaster, BBC Radio 4

BertL
01-20-2010, 08:49 PM
This should move you forward:
[...]

Hello Philip,

Thank you very much, your code helped me a great deal. After Googling some more about Javascript with forms I added some of my own code to it. Basically, it's the same as your code only the way the numeric values for month, year and day are picked up/converted to JS variables and a 'check if the checkbox is checked' checker.

The script first checks whether the content can be skipped or not (data coming from a checkbox named "skip" in the form). If the content can be skipped, it just says "Content skipped" and goes to the following page; if it can't, all of your code will be checked.

Here's my final code, which seems to work just how I want. (I'm putting this here so that other people looking for a similar date-through-dropdown-boxes validation form can benefit from this).


<script type = "text/javascript">
function checkValidDate(form) {
var mmx = parseInt(form.month.value);
var yr = parseInt(form.year.value);
var dd = parseInt(form.day.value);
var stat = form.stat.value;

if (skip=="on") {
alert ("Skipping all of the below!")
return true;
}
else {
mm = mmx-1; // remember that in Javascript date objects the months are 0-11
mm = mmx-1; // remember that in Javascript date objects the months are 0-11
var nd = new Date();
nd.setFullYear(yr,mm,dd); // format YYYY,MM(0-11),DD
var ndmm = nd.getMonth();
if (ndmm != mm) {
alert (dd + "/" + mmx + "/" + yr + " is an Invalid Date!");
return false;
}
else {
alert (dd + "/" + mmx + "/" + yr + " is a Valid Date");
}

// date is valid - is it after today?

var now = new Date().getTime();
var selectedDate = nd.getTime();
if (selectedDate > now) { // not before today's date
alert ("Invalid date - must not be after today");
return false;
}
else {
alert ("Date is valid - before today's date");
return true;
}
}
}
</script>
Also, for the form I used the following code.

<form name="addfilm" method="post" onSubmit="return checkValidDate(this)">
<select name="month">
<option value="1">January</option>
<option value="2">February</option>
<!-- other months omitted for viewing friendliness -->
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day">
<option value="1">1</option>
<!-- other days omitted for viewing friendliness -->
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year">
<option value="2010">2010</option>
<!-- other years omitted for viewing friendliness -->
<option value="1969">1969</option>
</select>
<input type="checkbox" name="skip">
<input type="submit" value="Add film">
</form>

Philip M
01-20-2010, 09:08 PM
Looking good. But

if (skip=="on") {
alert ("Skipping all of the below!")
return true;
}

How does skip acquire the value "on"?

Surely you want:

if (document.addfilm.skip.checked) {
alert ("Skipping all of the below!");
return true;
}

BertL
01-20-2010, 09:18 PM
Looking good. But

if (skip=="on") {
alert ("Skipping all of the below!")
return true;
}

How does skip acquire the value "on"?

Surely you want:

if (document.addfilm.skip.checked) {
alert ("Skipping all of the below!");
return true;
}
Good point. I did some experimenting with checkboxes and basic javascript alert functions to see what the value of a checked box would be in javascript using [icode]alert ("Checkbox: " + form.skip.value);[/code]. What was returned was "Checkbox: on" in the alert. I'm not sure at all how the "on" value is acquired; it might be through the conversion to javascript or something. All I know is that the value returned on when I checked the box.

Your way of checking the checkbox seems to be more reliable and logical, though, so I've replaced my code with that.