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

[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);
  }
}

[cvrebert]

Quasi-duplicate of #1675. This is pretty much inherent to the :invalid pseudo-class & HTML 5 form validation.

[ghost]

The pseudo selector :invalid really has nothing to do with Bootstrap or its jQuery Plugins as all of the validation is done by the browser thanks to the new HTML5 specs. My suggestion is to write your own css to disable the :invalid pseudo selector.
Not Tested:

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: none;
  border-color: none;
  &:focus {
    border-color: none;
  }
}

[gurgeous]

The undesirable styling behavior is coming from bootstrap and is difficult to turn off. The type=email case is especially pathological.

[mdo]

I'm open to hearing more about this—perhaps we just punt it entirely and focus on the classes we have elsewhere in v3 now?

[gurgeous]

I've completed my validation project and my opinions have hardened a bit. My vote would be to remove the :invalid rules entirely in 3.0. I don't think they can be made to work correctly, unfortunately. It's just not the right time to be turning everything red.

Emphasize .has-error in 3.0 and let people apply it manually using javascript. That's what I ended up doing.

For posterity, here are the SASS rules I used to disable :invalid in 2.3.1. Open to suggestions if there's a better way to do this.

// turn off bootstrap's :invalid styling
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: $textColor;
  border: 1px solid $inputBorder;
  &:focus {
    border-color: rgba(82,168,236,.8);
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
  }
}

// gotta make sure the above rules don't wipe out our REAL error case
.control-group.error {
  input:focus:invalid,
  textarea:focus:invalid,
  select:focus:invalid {
    color: $errorText;
    border: 1px solid $errorText;
    &:focus {
      border-color: darken($errorText, 10%);
      @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($errorText, 20%));
    }
  }
}

[mdo]

Gone in v3. Thanks!

[ssorallen]

I came across this thread when I noticed v3 inputs no longer showed the invalid state. It would be interesting to use a delayed transition to apply the invalid styles, something like this jsFiddle: http://jsfiddle.net/8QDHy/1/

With a 2-second delayed transition, the input has to be both :invalid and :focus for the delay time before the new styles take effect. While typing an email address for example, when the value is changing from valid to invalid like @gurgeous mentioned, it doesn't stay invalid long enough for the :invalid styles to take effect. Try out the Fiddle to see it work.

Some caveats I didn't figure out:

• The box-shadow color changed immediately despite the transition being applied to all.
• Blurring an invalid input and then refocusing it means it has no border until :focus is once again applied for 2s. This might be deal breaker.
• Browsers that support pseudo selectors but not CSS transitions will have the same problem as described in the issue.

[heruan]

Automatic validation styles were very useful, I really miss them. What about pull them back? They make sense when using type="email", required, etc.
I respect the concerns of the OP, but I think the majority of users would find this useful again. Validation states could be deactivated using something like this <form class="bs-no-validate">.

[fbretel]

This problem is known from the W3C. Here's a great post related to this issue: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

[cvrebert]

IMO, it would be nice to add a CSS class to explicitly enable the :valid/:invalid styles.

[gautam890]

in IE invalid focus is not working..............:(

[cvrebert]

@gautam890 Per the above conversation, the feature was removed from Bootstrap. You have to manually apply validation state classes instead (e.g. .has-error): http://getbootstrap.com/css/#forms-control-states
And IE<10 didn't support the :invalid CSS selector anyway: http://caniuse.com/form-validation

[mgufrone]

wow, that's tough decision. well, is there any other safe alternatives so the validation comes again on the next version. it's really helpful actually

[cvrebert]

@mgufrone Best route at this point is probably to write a third-party plugin that toggles the Bootstrap validation state classes in response to user input & validation events.

[mgufrone]

@cvrebert yep, i do that for this time. so when it's invalid it's adding a class on an invalid input element.

[krnlde]

If someone is urged to have this feature back, here's how you do it:

.form-control:invalid {
  .form-control-focus(@brand-danger);
}