I been working on a registration form, first I did the JavaScript to validate the fields and everything works just fine, but now I decided to create this CSS
.correct_field
{
padding-right:18px;
background:url('correct_field.png') no-repeat 100% 0;
}
.incorrect_field
{
padding-right:18px;
background:url('incorrect_field.png') no-repeat 100% 0;
}
the CSS is not used until the script checks the field, this is one of the checks that is done in some fields
function numbers()
{
if (NOnumbershere.test(thevalue) == true)
{
document.getElementById("errors_console_1").innerHTML = ("No numbers are allowed in this field.<br>Only characters a-z in the field.<br>Please correct it!");
count_errors++;
error=true;
errors_console();
button_disabler();
thefield.className="incorrect_field"; // here is my problem at the moment
initialize_check_text_field();
stop(event);
}
}
basically the field is checked and when someone enters a number or numbers an error is displayed and the style of the field is changed so it shows the image in the CSS above and it works just fine.
Now, the problem, after the class is applied the script does not check again once the user corrects the field because now the CSS class is the one in the field and not the JavaScript class.
does anyone know how I can manage to add that CSS class without messing up the script?
So, I did some research and found that doing className += should work, but I did that and it still does not work, any ideas?