I am looking for a way to highlight portions of a form during a javascript validation. What I am currently doing is running the validation on submit, throwing an alert at the field that fails and then exiting and placing focus in that field. The problem with this is that it’s possible to get lots of alerts if multiple fields fail. What I want to do is throw one alert with all of the fields that failed and then highlight those fields and/or their text labels. Is this possible with some combination of DHTML? I figure that I can pass any fields that fail validation into an array and throw a single alert without any problems, but how would I go about highlighting the text and field on the form? A note that may be of help is that all of the fields are or can be placed into tables.
Subject: Highlighting a text label or a field with javascript in form validation
Use Style Sheets.
If your fields are in tables then set the ID property for each cell in the HTML tab of the table property box. Give each one a different name (e.g. Label1, Label2, etc). Also, for each cell assign a class name to it, for example FieldLabel. The class name should be the same for all the cells that hold a field label.
Dump the following into the HTMLHeadContents area of the form (assuming the name of the class is FieldLabel as mentioned above):
"
.FieldLabel
{
background: #FFFFFF;
}
.ValidationFailed
{
background: #FFFF33;
}
"
Next, code your javascript function to change the class of a table cell if validation for a field fails.
Say your validation fails for field x and field x’s label is in a table cell with ID FieldLabelx, you would code javascript as follows:
if( document.forms[0].fieldx.value == “” ) {
document.getElementById(‘FieldLabelx’).className=‘ValidationFailed’;
}
Combined with the style specified in the HTMLHeadContent above the color of the table cell will change to yellow if fieldx is blank.
Hope that helps.