View Full Version : Adding code to a function, but not replacing it

05-09-2007, 03:55 PM
Hi all,

I have a custom object that I have created which validates textboxes holding dates.

var dates = new Array();
window.onload = function () {

// Dates fields to validate
dates[dates.length] = new DateValidationControl(document.searchCritreaForm.FromEngComp, document.imgFromEngComp);
dates[dates.length] = new DateValidationControl(document.searchCritreaForm.ToEngComp, document.imgToEngComp);

dates[dates.length] = new DateValidationControl(document.searchCritreaForm.FromRecRet, document.imgFromRecRet);
dates[dates.length] = new DateValidationControl(document.searchCritreaForm.ToRecRet, document.imgToRecRet);


The first passed in variable is the input type="text" elements, second one is the image next to it which displays a cross or tick depending on if its valid.

I wont show you all the code but just the relevant bits here, the object creation...

function DateValidationControl(oTextbox, oIcon) {

// textbox holding date
this.textbox = oTextbox;

// information on date

this.validDate = true;
this.day = null;
this.month = null;
this.year = null;

this.dtCh= "/";

// Removed as dont think we need this

this.minYear = 1900;
this.maxYear = 2100;

// Image variables
this.icon = oIcon;
this.oldSrc = "";
this.busySrc = "/jpreturn/images/progress.gif";
this.okSrc = "/jpreturn/images/tick.gif";
this.failSrc = "/jpreturn/images/cross.gif";

// Set on the events to trigger of the validation

// Initise the object to set up event handlers
DateValidationControl.prototype.init = function () {

//save a reference to this object
var oThis = this;

if (this.icon) {
this.oldSrc = this.icon.src;

//assign the onkeyup event handler
this.textbox.onkeyup = function (oEvent) {

//assign onblur event handler
this.textbox.onblur = function () {

// if a form reset is performed, validate the date
this.textbox.form.onreset = function() {

This has been working fine for now, on submit of the form I loop through all the date Validation objects to check if "validateDate" is true.

There is a problem tho now I have discovered, if I enter some rubbish dates and try submit it doesn't allow it, thats fine, however, when I hit reset, the objects do get not get updated and despite them now being blank, no event has triggered to update there status's. I tried adding onchange in the init method, that did no good, My latest effort (in red) is to set the onreset method but this would only work if I had one date field as the function is just getting overwritten.

So im wondering if there is a way to rather than setting a new function for the form reset, if it is possible to add code into the function so I could call validate for each dateValidation object?

If there is a much simplier way that I have overlooked to update the objects status onreset please let me know.

I know I could simply loop through my array of dateValidation objects and call the validateDate function but I want to keep as much code as possible in the object so it easy to reuse.

Help very much appricated.