Highlight text between form inputs?

Question

I have a form that is validated by js when the user submits it. My code detects empty and invalid fields (ex 1 number in phone number is obviously an invalid phone number).

I am asked if i could highlight fields missing or in error. I think this would be cool IF i can do it automatically. With HTML like the below how can i make name, phone or whatever else turn red? i cant think of any solution. Maybe i can pull the html body from form find the target input and insert a div on the left side of the input to the prev tag and use that div to make the font red. But i HATE that idea because that requires poking the HTML instead of DOM and i am pretty sure some nastiness will occur. Any ideas?

Name: <input type=text name="Name"/>
Phone: <input type=text name="PhoneNo"/>

Answer 1

You should rather write your HTML to have an element around the labels in the first place. The correct HTML would be

<label for="Name">Name:</label> <input type="text" name="Name" id="Name" />

Then just add a class to the label to turn it red when it should.

By the way, this even makes the input receive focus when the label is clicked! Yay!

Answer 2

such as:

//some javascript validation here
name.style.color = 'red';
phoneNo.style.color = 'red';

?

Answer 3

(1) Pull the form
(2) Loop through the inputs
(3) Find the one that needs attention
(4) Add the class .needsattn
(5) Add .needsattn { background:red;} to your CSS

Answer 4

How about labels with the for attribute? - Check out its documentation here

Answer 5

Change your HTML to have the <label> surrounding the 'Name' and 'Phone', which will make it more accessible and provide the functionality you're looking for.

HTML

<label for='Name'>Name:</label> <input type=text name="Name"/>
<label for='PhoneNo'>Phone:</label> <input type=text name="PhoneNo"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery

​$('input').blur(function() {
    $('label[for="'+$(this).attr('name')+'"]').css('color','red');
});​​​​

Live Example

http://jsfiddle.net/tve8J/

You'll of course have to add your validation, I don't know what you consider and 'invalid field'