form validation adding border around input

[andy106]

Hello;

Currently on my form if you your input dosn't pass my validation you will see an error message and red box will also appear around the input box. The issue is that if you will it out the box will not disappear until you hit submit. Obviously that is because I have PHP validate the form, but I would like for the red border to go away as soon as the conditions are met, which is why I thought, JS would be the best solution.

I know how to write a conditional state in JS but I am not sure ho to echo out different classes based on the conditions.

Thanks for all your help

[Sockwave]

Sorry if I'm not exactly sure where you're having trouble, but here are some ideas: to set up your form checking, you want to use either an onChange or onBlur event attached to the input, i.e. <input type="text" onblur="yourCheckerFunction()">. Removing a class is trickier, but here is one way to do it: http://www.openjs.com/scripts/dom/cl...nipulation.php

[andy106]

I am sorry if I wasn't clear, so right now if you don't fill out the form and hit submit there will be borders around the unfilled required fields, so if you fill out the fields the red box stays until you hit the submit button and then PHP will re validate the field and remove the red border, but how can I make it instant so you don't have to hit submit for the border to go away but as you are filling it out.

[trandrus]

<input id="errorField" />
	
<script>

document.getElementById('errorField').onfocus=function{
	this.style.border=0;
}

</script>

it would help to see your source code