input:invalid is too aggressive with type=email and others

Created by: gurgeous

This bug is in reference to this style block from forms.less, shown below. In a nutshell, as soon you start typing into an input field with type=email the text and border instantly turn red. The user gets the following experience with that input field:

1. unfocused and blank - border is black
2. focused, but still blank - border is red (if required=true)
3. enters "a" - border and text are red
4. "a@" - border and text are red
5. "a@b" - border is blue, text is black

Note that the user still hasn't even finished entering their email address, even if the email address is technically legal according to the RFC. Tested with recent versions of Firefox and Chrome.

The red color is premature and scary. I need more explicit control for when the text (and border) turn red. All of the HTML5 input validation attributes result in similar problems. The rules below are a little too aggressive, in my opinion. Can we make them optional, move them into a js plugin, etc.?

// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
  &:focus {
    border-color: darken(#ee5f5b, 10%);
    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
    .box-shadow(@shadow);
  }
}