twitter/bootstrap — Issue #1068: 2.0-wip: Form elements in invalid state by default with required attribute.
Author: tinyfly
Created: 2012-01-19 20:32:25+00:00
State: open

In HTML5 browsers, when the page loads and there are empty form elements with the required attribute they are flagged as invalid. So in bootstrap using a naked `input:invalid` selector means that all elements that are required get the red border before the user has done anything with the page.

A suggestion is to remove the `:invalid` styles and just rely on javascript and the `.error` class on `.control-group` to handle styling. Or stack with other psuedo-classes like `input:focus:requred:invalid` as mentioned [in this _A List Apart_ article] (http://www.alistapart.com/articles/forward-thinking-form-validation). Not exactly ideal but it is a bit better then having required elements in error state as soon as the page loads