...

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



ellisd5
05-09-2007, 04: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
this.init();
}


// 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) {
oThis.validateDate();
};


//assign onblur event handler
this.textbox.onblur = function () {
oThis.validateDate();
};


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

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.
Thanks,
Dale



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum