Function called at the start of page load - javascript
I have a problem; for some reason my function is called at the beginning of the web app during page load.
My code looks like this
function validateName(element) {
var len = element.value.length;
//checks if the code is than 6 characters
if (len == 0) {
element.style.backgroundColor="red";
if (element.id == "firstname")
{
document.getElementById('firstNameError').style.display = "block";
}
else if (element.id == "lastname") {
document.getElementById('lastNameError').style.display = "block";
}
return true;
} //if == 0
else {
element.style.backgroundColor="green";
if (element.id == "firstname")
{
document.getElementById('firstNameError').style.display = "none";
}
else if (element.id == "lastname") {
document.getElementById('lastNameError').style.display = "none";
}
return false;
} // if != 0
}
The logic behind this function is to validate the text boxes where the user enters their name. Basically the problem I am facing is as soon as I open my web page, the text boxes are red and say, "Your name cannot be blank!" (which is firstNameError
). Then as soon as I enter some text in the textbox it doesn't change, it still stays red and displays an error.
This is how I call the function:
function init() {
var firstName = initToolTip("firstname", "firstnameTip");
var lastName = initToolTip("lastname", "lastnameTip");
var promoCode = initToolTip("promocode", "promocodeTip");
//opens the TOS window when you click 'terms and conditions' link
document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) };
//checks the length of the promo code
promoCode.onblur = validatePromoCode(promoCode);
//checks the validity of a name (is not blank)
firstName.onblur = validateName(firstName);
lastName.onblur = validateName(lastName);
//document.getElementById('submitButton').onmousedown = validateForm();
}
I don't understand why it is called as soon as the page is loaded, since it is set to be called onblur
. can anyone suggest ways to fix this?
source to share
You need to pass the function references onblur
, not the result of an immediate function call. Change to this:
function init() {
var firstName = initToolTip("firstname", "firstnameTip");
var lastName = initToolTip("lastname", "lastnameTip");
var promoCode = initToolTip("promocode", "promocodeTip");
//opens the TOS window when you click 'terms and conditions' link
document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) };
//checks the length of the promo code
promoCode.onblur = function() {validatePromoCode(promoCode);};
//checks the validity of a name (is not blank)
firstName.onblur = function() {validateName(firstName);};
lastName.onblur = function() {validateName(lastName);{;
//document.getElementById('submitButton').onmousedown = validateForm();
}
This changes each onblur assignment to accept an anonymous functional reference that will be executed later when the event occurs onblur
, rather than immediately like your current code.
source to share
You are not passing onblur function to init; you are passing the result to a function.
See the following example:
var Afuntion=function(){
console.log("hello from function");
return 22;
}
Element.onblur=Afunction("something");//Element.onblur is now 22 and
// "hello from function" is logged
Element.onblur=Afunction; //now onblur has a reference to the function
Element.onblur();//this will log "hello from function" and return 22
You are not using a library like jQuery to make it easier to add / add event listeners, so it hurts a bit to set up an event listener using pure JS and read the event in a function. There should be some info on SO how to do it anyway
In your case, you can try this:
promoCode.onblur = function(){ validatePromoCode.call(promoCode,promCode);};
source to share