Reset textfield background color?

[sjcoder07]

I am doing an JavaScript exercise. I want to hightlight (change textfiled background color) the textfiled after the form being submitted.

My problem is after user entered the valid entry, the textfield color remain as colored.

e.g after user correct mistake in first name field, but have an invalid entry for last name field. After form submission both first name and last name field remain light blue.

a) I want to restore textfiled color to it's original color (white).
b) Textfield color should be restored, after user clicked reset button.

Please give me some advises on what kind of event handler and JavaScript Object properties shall I use in order to resolve this problem. Thanks!

sample form (http://www.cuj06.com/js_project/multiple_field_validation.html)

JavaScript code

function form_validation()
{

//declare boolean variable to hold result returned from
//validation function

var fnameOK = false;
lnameOk = false;
genderOK = false;
ageOK = false;
deptOK = false;
emailOK = false;
phoneNumberOK = false;

grade_levelOK = false; //check for student academic grade level: undergraduate or graduate student
//commnetsOK = false;

errorMsg = "";
/*
get reference for each element on the form
*/
var first_name_field = document.getElementById("fname");
var last_name_field = document.getElementById("lname");



var maleRadioButton = (document.getElementById("maleR"));
var femaleRadioButton = (document.getElementById("femaleR"));

var age_field = document.getElementById("age");

var phone_field = (document.getElementById("phone_num"));

var underGradRadioButton = (document.getElementById("under_graduate"));
var graduateRadioButton = (document.getElementById("graduate"));

// var comments_field = (document.getElementById("comments"));

/*
call validation function
*/
fnameOK = checkFirstName(first_name_field);

if(fnameOK)
{
lnameOK = checkLastName(last_name_field);
}

//genderOK = checkGender(maleRadioButton, femaleRadioButton);

//ageOK = checkAge(age_field);

//deptOK = checkDept();

//emailOK = checkEmail();

//phoneNumberOK = checkPhone(phone_field);


//grade_levelOK = checkClassStanding(underGradRadioButton, graduateRadioButton);

//commnetsOK = checkComments(comments_field);

/*

*/


if(fnameOK && lnameOK && genderOK && ageOK && deptOK && emailOK && phoneNumberOK && grade_levelOK)
return true;
else
return false;

}//end form_validation fn



/* --------------- function checkFirstName -------------- */
function checkFirstName(elementReference)
{
if(elementReference.value == "")
{
alert("First Name field is blank");
document.getElementById("fname").style.backgroundColor = "lightblue";
return false;
}
else if(elementReference.value.length < 2 || elementReference.value.length > 15)
{
alert("First Name field should between 2 to 15 characters");
document.getElementById("fname").style.backgroundColor = "lightblue";
return false;
}
else
return true;

}

/* --------------- function checkLastName -------------- */
function checkLastName(elementReference)
{
if(elementReference.value == "")
{
alert("Last Name field is blank");
document.getElementById("lname").style.backgroundColor = "lightblue";
return false;
}
else if(elementReference.value.length < 2 || elementReference.value.length > 15)
{

alert("Last Name field should between 2 to 15 characters");
document.getElementById("lname").style.backgroundColor = "lightblue";
return false;
}
else
return true;
}


sjcoder07
8-4-07

[PeejAvery]

You will need to use the onchange event to set the color back. Also, don't use backgroundColor, just use background. It is much more universal for CSS.