I have a HTML Form which needs to be submitted to an order page so a user can order a personalized product. I have everything working except for the date validation for the form. I need to be able to check the Date of Birth they are entering is a valid date. That means I need to check for Leap Years so they can’t enter 29th Feb on a non leap and I also need to check for the month so they cannot enter more than 30 for months where there is no 31.
I have the following piece of javascript:
<script type="text/javascript">
var month = document.validateDate.month.value;
var day = document.validateDate.day.value;
var year = document.validateDate.year.value;
function validDate( month, day, year)
{
// Test for leap year
if ((year % 400 == 0) || (year % 4 == 0) &&
!(year % 100 == 0))
leap = true;
else
leap = false;
// Validate date // Assume a valid date-test otherwise
if (year < 1900 || year > 2050) // year must be four digits and
return false; // within reasonable range
else if ((month < 1) || (month > 12) || // test general date and month range
(day < 1) || (day > 31))
return false;
else if (((month == 4) || (month == 6) || // test 30 Day months
(month == 9) || (month == 11)) && (day == 31))
return false;
else if (month == 2 && leap && day > 29) // test February leap years
return false;
else if (month == 2 && !leap && day > 28) // test February NON-leap years
return false;
else
return true; // otherwise, date is OK
}
</script>
Now I need to invoke it. And this is where the problem lies… I actually have 2 dates of birth to collect and I need to validate both of them when I submit the form.
Please forgive the PHP - That is the easiest way of creating the “Years” for the dropdown. You can view the form live at http://togevi.com/community/user/astro-cr if you need to.
What I need to be able to do is check “day1, month1, year1” as one date and then “day2. month2, year2” as another date and if either one of them return invalid(false) I need to display an alert to tell them to correct it when the Submit button is pushed. I don’t want the form to submit unless both dates are valid.
Can somebody please help me modify the above javascript and form to accommodate this requirement?
The way I used to do it in the past was as follows:
Create a date based on the selected values (year, month, day)
Check if the DAY of the newly created date is the same as the selected day and if the MONTH of the newly created date is the same as the selected month (keep in mind: zero-based!)
If they are, then the date is valid
If they aren’t, then the date is invalid
I’m explaining it in words, because that way you can try it for yourself.
Sorry Denk but I’m not sure that actually solves my problem.
I don’t see how your solution would tell me if 29th February 2009 was a valid date? Or if 31st November was a valid date? The function I have got does just that, I just need to know how to run it on BOTH date fields before the form submits rather than just running it on one of them.
I have changed the way you populate your “day” and “month”, using PHP (in your example, the day and month options didn’t have a value and it was easier for me to write it this way
So what have I changed in your HTML?
The way day and month options are created
Added the attribute, onsubmit on the form element. ==> onsubmit=“return validateForm()”
Then I created the JavaScript function(s), which you need to validate it
So in “validateForm”, I just get the values and pass them onto the “checkDate” function.
The “checkDate” function creates a new Date object and then checks if the selected DAY and the selected MONTH match with the day and month of the newly created Date object.
function validateForm(){
var day1 = document.getElementById( "day1" ).value;
var month1 = document.getElementById( "month1" ).value;
var year1 = document.getElementById( "year1" ).value;
var day2 = document.getElementById( "day2" ).value;
var month2 = document.getElementById( "month2" ).value;
var year2 = document.getElementById( "year2" ).value;
return checkDate( day1, month1, year1 ) && checkDate( day2, month2, year2 );
}
function checkDate( day, month, year ){
var d = new Date( year, month - 1, day ); // month is zero-based!
return ( ( d.getDate() == day ) && ( d.getMonth() == month - 1 ) );
}
That works I just need one more thing now… Where do I set the error message so I can tell people why their form is not submitting if they have an incorrect date?
I’m happy to use a JS Alert.
Thanks for your reply, but as you can see above - we already resolved that question I didn’t understand the function properly but denk has kindly given me an example so now that is working. What I am trying to do now is add in an alert somewhere so the user can get some feedback on why the form doesn’t submit if they do enter an invalid date. At the moment, all it does is stay on the page without any feedback to the user. Do you know where in the above code I would place the alert so the user can be told they have entered an invalid date?
Don’t use an alert for client messages - alerts are intended for debugging and display additional options in some browsers - such as an option to turn off JavaScript for the current page.
You should be inserting the message into the HTML in the page itself - the easiest way is to use innerHTML.
The code example fellgall posted is slightly better than mine, so feel free to use that ( with the exception of a small bug in his code and a typo )
function validDate( month, day, year) {
var valdate = new Date(year, month - 1, day); // minus one because month is zero-based (januari = 0, februari = 1, ...)
return (day === valdate.getDate());
}
In regards to your error message:
You should create an empty error-div somewhere on your page
<div id="form_error" style="display:none"></div>
Change the alert to add a message to “form_error” and to make it appear. Complete JavaScript-code below (untested though). Read it first and see if you understand what is written. If you don’t, then just ask what’s troubling you
function formValidate() {
var form_error = document.getElementById( "form_error" );
if( !validateForm() ){
form_error.innerHTML = "You have entered an incorrect date.";
form_error.style.display = "block";
return false;
} else {
form_error.innerHTML = "";
form_error.style.display = "none";
return true;
}
}
function validateForm(){
var day1 = document.getElementById( "day1" ).value;
var month1 = document.getElementById( "month1" ).value;
var year1 = document.getElementById( "year1" ).value;
var day2 = document.getElementById( "day2" ).value;
var month2 = document.getElementById( "month2" ).value;
var year2 = document.getElementById( "year2" ).value;
return checkDate( day1, month1, year1 ) && checkDate( day2, month2, year2 );
}
function checkDate( day, month, year ){
var valdate = new Date(year, month - 1, day); // minus one because month is zero-based (januari = 0, februari = 1, ...)
return (day === valdate.getDate());
}
