Javascript and css class problem

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?

Thank you, I had it that way, but there was a different problem in my script, and what you said made me realize where I was messing up.

The standard technique is to remove the error class name at the start of performing your checks.

That way it remains removed if it passes the validation, and if it doesn’t then the class name is put back there.