HTML5 Required input styling

You can use :valid and :invalid selectors. Something like this

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

However, this will only work in browsers that support native validation, and only for fields that make sense. As far as I know, right now that only means Chrome (maybe Safari, but haven't checked).

So by native validation I mean that in chrome if you do <input type="email"> the field's value will be validated for email type string (without any additional javascript), so the styles above will work. However, if you were to attach them to a type="text" field, or a second password field (that is suppose to match the first), you'd only ever get green because everything is valid, and in the case of password, there's no "type" for that anyway.

Which basically means that to support all browsers, and more importantly, wider array of validations you still have to resort to javascript, in which case assigning .valid/.invalid class shouldn't be a problem. :)

Yeah as SLaks said there is no CSS selector to do this. I would doubt this will ever be in the scope of CSS because CSS would need to check the contents of an input.

Your best option, still, is probably to call a javascript validation function when clicking a button, rather than actually submitting the form. Then checking the [required] fields for appropriate content and either submitting the form or highlighting the required fields that were not filled in.

JQuery has some nice plugins that take care of this for you http://docs.jquery.com/Plugins/validation

I've resorted to using JavaScript to apply a class of .validated to the form on submit, then use that class to style :invalid fields, e.g.:

.validated input:invalid {
  ...
}

This way fields don't show up as invalid on page load, only after the form is submitted.

Ideally there would be a pseudo class applied to the form on submit.