/    Sign up×
Community /Pin to ProfileBookmark

form validation adding border around input

Copy linkTweet thisAlerts:
Jan 15.2011

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

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SockwaveJan 15.2011 — 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/class_manipulation.php
Copy linkTweet thisAlerts:
@andy106authorJan 15.2011 — 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.
Copy linkTweet thisAlerts:
@trandrusJan 15.2011 — [CODE]<input id="errorField" />

<script>

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

</script>[/CODE]

it would help to see your source code
×

Success!

Help @andy106 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...