jQuery Validation Highlighting One Label for Two Fields

Question

I have a form validation script using the jQuery Validation plugin where for the phone area, there are 2 fields, area code and phone number. However, there is only one label for both fields that reads "Phone." Both fields are required in the validation.

So when there is an error in the phone field, the label gets highlighted and the error message is shown. If there is an error in the area code field, the error message is shown but the label doesn't get the error class so it doesn't get the highlight.

Can anyone think of a way to highlight the "Phone" label and display the correct message when the area code field does not validate? Thanks!

Answer 1

Associating a label with two elements is actually invalid html and not recommended.

From the w3 spec:

Each LABEL element is associated with exactly one form control.

I would suggest adding a second label element for postcode and removing it visually from the screen if you don't want it to be seen by the user by setting its margin to -999em or a similar method.