Is it good practice to express the state of an HTML element--such as whether an input's value is valid--using a CSS class? Would it be better practice to use data attributes, the properties of a JavaScript object representing the element, or some other method? Example:
CSS:
.error {
box-shadow: 0 0 8px .1em #b94a48;
}
.error
is appended to any input that fails validation. When the user attempts to proceed, jQuery checks for the class:
JavaScript:
if ($('#container').find('.error').length !== 0) {
// Don't proceed.
}
.error
class, consider using aria-invalid as well as a non-color-based visual indicator, such as an exclamation point adjacent to the field.