Highlight radio button in jQuery form validation

HTML & CSS
1

Hello there,

I’m not entirely sure if this is a matter of CSS or Javascript.

I’m working on a sign up form which uses jQuery Validation to validate the input. Below is the test form.

http://junglejap.com/FormTest/

When a user misses required fields they are highlighted in red.

Now the problem I have is the radio buttons. They are highlighted in IE just like other fields but this does not happen in FireFox.

Is there any way so that these radio buttons (or at least one of them) are highlighted?

Rio

2

Let us know if that works. Would be a great solution to a common problem. :slight_smile:

3

Hi there,

Thanks for the input. In the ideal world I would attach messages as in the sample suggested by AtSea webdesign. The client for this project is very precise about the layout of the page and very unlikely to change their mind about this.

I’m going try wrapping the radio buttons in <span> and add the highlight this way. Hope I can find the way.

4

Radio buttons are extremely hard to style cross browser. I’d recommend wrapping the radio buttons in a span or something and highlighting THAT with the JS :).

5

May not be exactly what you are looking for but here’s a good example for adding the error message inline.

http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html.

I attended Jarod Spool’s UIE Conference in Philly a couple of weeks ago and there was a very informative presentation by Luke Wroblewski on form validation. He emphasized making it easy and simplistic for the user to address any errors.

Looking at your form it highlights the fields and then in tiny text at the top it states there are errors. What errors? What format do I need to enter for email? Why not display inline what the user needs to fix and how they should fix it?

In other words next to the field, on error show 'Email is required. Use format xxx@xxx.xxx.

That way the user is given an example of how the field is suppose to be completed without them having to guess what they need to do.

There is also another way using jQuery that displays an error bubble as the user is typing that displays the various formats that are acceptable for that particular field.