Monday, May 18, 2009

Badass Javascript Date Validator.
Useful for Rails.

Haven't posted for a while. I should remember to post cool routines like the one below after I write them as they are useful to many.
I have seen quite a lot of good examples of folks using (and expanding upon) routines I wrote for some of the Gadgets that ship with Vista (to be found in library.js if you have a Vista Box) and for some of AOL's (apparently deprecated) Mac OSX Widgets.
Functions like showOrHide, getLocalizedString, getSpinner (emulates Vista-like spinner image) I have seen in use all over the place.

Here is a somewhat badass Date Validator routine I wrote today that takes in either a string date value or an <INPUT> Element Object and validates the date to be formatted as DD-MM-YYYY.

I wrote it for use by a Ruby on Rails application, but it's pretty handy as a general library function.

Using this (simple) Regex:
var DATE_REGEX = /^(\d{2})-(\d{2})-(\d{4})$/

////////////////////////////////////////////////////////////////////////////////
// //
// validateDate([object|string] oHTMLInputElement) - Validates a date value //
// =============================================== //
// You can pass in the id to an <input> Element, an actual //
// oHTMLInputElement or an actual date value in the form of a string //
// //
////////////////////////////////////////////////////////////////////////////////
function validateDate(oHTMLInputElementOrDateValue) {
var theDateValueToValidate = "";
var theValidatedDateValue = false;
var bIsInputElement = false;
if (typeof(oHTMLInputElementOrDateValue)=="string") {
var oHTMLInputElement = document.getElementById(oHTMLInputElementOrDateValue);
if (oHTMLInputElement && typeof(oHTMLInputElement=="object") && (oHTMLInputElement.tagName=="INPUT")) {
theDateValueToValidate = oHTMLInputElement.value;
bIsInputElement = true;
} else {
// Presumably they just passed in a date string
theDateValueToValidate = oHTMLInputElementOrDateValue;
bIsInputElement = false;
}
} else {
// They have passed in an Object
if (typeof(oHTMLInputElementOrDateValue=="object") && (oHTMLInputElementOrDateValue.tagName=="INPUT")) {
var oHTMLInputElement = oHTMLInputElementOrDateValue;
theDateValueToValidate = oHTMLInputElement.value;
bIsInputElement = true;
}
}
// If we have a date value to actually validate, let's get started
if (theDateValueToValidate != "") {
var theDateValue = theDateValueToValidate.replace(/\//g,"-"); // Ruby-side only accepts hyphens
if (DATE_REGEX.test(theDateValue)) {
theValidatedDateValue = theDateValue;
} else {
if (theDateValue.indexOf('-') > -1) {
var theMonth = theDateValue.split('-')[0];
var theDay = theDateValue.split('-')[1];
var theYear = theDateValue.split('-')[2];
theMonth = parseInt(theMonth).PadWithZero(); // If they've entered a single digit for either Day or Month, pad with zero accordingly
theDay = parseInt(theDay).PadWithZero();
if (theYear.length==2) { theYear = "20" + theYear; } // If they've entered a two-digit year, assume it's in the 21st century
theDateValue = theMonth + "-" + theDay + "-" + theYear; // Rebuild the date. Hopefully this will work
if (DATE_REGEX.test(theDateValue)) {
theValidatedDateValue = theDateValue;
}
}
// If we get to this point and none of our efforts have worked to format the date as "required", throw an error (if they are using an INPUT element)
if (!theValidatedDateValue && bIsInputElement) {
alert("ERROR: Date must be formatted as follows:\n\n\tDD-MM-YYYY\n\nPlease correct before continuing");
oHTMLInputElement.focus();
}
}
}
if (bIsInputElement && theValidatedDateValue) {
oHTMLInputElement.value = theValidatedDateValue;
}
return theValidatedDateValue;
}

Hope you find this one useful as well.

Shannon Norrell


Now on GitHub as well