Skip to content

Loading…

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

Closed
gurgeous opened this Issue · 16 comments

9 participants

@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
Bootstrap member

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
Bootstrap member

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
Bootstrap member

Gone in v3. Thanks!

@mdo mdo closed this
@seriema seriema added a commit to seriema/bootstrap-grunt that referenced this issue
@seriema seriema Merge remote-tracking branch 'upstream/3.0.0-wip' into 3.0.0-wip
* upstream/3.0.0-wip: (42 commits)
  Rename class name in placeholder
  Fixes #8154: enforce full width `.navbar-nav.pull-right` in mobile
  Fixes #8159: Be more specific about disabled inputs to avoid iOS bug
  Fixes #8093: Removes invalid focus styles on inputs
  run make on previous commit
  Fixes #7730: Better hiding of empty titles in popovers
  Run make on last commit
  Use `@font-family-base` for headings font-family variable
  run make on @nextgenthemes last commit
  rename '.navbar .nav' to '.navbar-nav'
  Add heading font family variable
  Offcanvas example update
  Fixes #8001: add IDs for example inputs
  Add missing property to form-horizontal docs
  Add support for `tr`, `th`, and `td` to responsive utilities
  run make on last commit
  docs/javascript.html: backticks -> <code>
  Use correct font-size to calculate input-heights
  Addresses #8199: darker default button
  Add note about Jekyll version per #8195
  ...

Conflicts:
	README.md
	docs/assets/js/bootstrap.min.js
	package.json
174c34f
@juthilo juthilo referenced this issue
@cvrebert cvrebert rm :invalid styling from docs
It was removed from the code in 90d4343  :-/
266bdfc
This was referenced
@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
Bootstrap member

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
Bootstrap member

@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
Bootstrap member

@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.

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue
@mdo mdo (less) Fixes #8093: Removes invalid focus styles on inputs 9656124
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue
@mdo mdo (less) Fixes #8093: Removes invalid focus styles on inputs 04f1de7
@krnlde

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

.form-control:invalid {
  .form-control-focus(@brand-danger);
}
@juthilo juthilo locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.