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

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’