Results 1 to 4 of 4

Thread: form validation adding border around input

Hybrid View

  1. #1
    Join Date
    May 2009

    form validation adding border around input


    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

  2. #2
    Join Date
    Jan 2011
    San Francisco
    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

  3. #3
    Join Date
    May 2009

    change css class when conditional statement becomes true

    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.

  4. #4
    Join Date
    Jun 2007
    Washington D.C. Metro
    <input id="errorField" />
    it would help to see your source code

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles