Input field with required tag have a red border on focus

[cnicodeme]

The title is quite explicit :)

If you define a input type with a tag required, when the user focuses the input, a red border appears even if the user hasn't entered nor did anything.

It's feel like something is wrong but nothing has been done yet.

The normal state should be blue.

[cgunther]

Which browser is this in?

It's probably the browser's internal HTML5 form validation kicking in, some of which are more eager than others.

This commit 1209a37 added :focus to the selector so it wont be red on page load. Not sure what else they can do as it's up to the browser.

[cnicodeme]

It's Google Chrome 16 under Fedora 16 64b.

By default, Google chrome doesn't add a red border style, as you can see on this jsfiddle : http://jsfiddle.net/cFuQS/
So I'm guessing the problem is from Bootstrap.

By the way, I use the 2.0 version.

[cgunther]

Ahh, ok, looks like Chrome changed how their handle invalid fields since the last I checked. I think in the past, they had a default :invalid style, and since the field is considered invalid on page load when it's empty, it'd start off visually invalid.

Check out this simple fork of yours: http://jsfiddle.net/8JqF6/. The field is considered invalid right away, before it's ever even focused. Bootstrap at least requires the :focus pseudo-class to somewhat avoid that, but then the result is the behavior you're reporting.

Short of dropping support for the HTML5 form validations or requiring some JS, I'm not sure what Bootstrap can do. Maybe someone else can chime in with an idea.

[cnicodeme]

I'm sorry but the fork doesn't seems to work (it appears to be the same as mine?).

I'll try to check the code of bootstrap to see if I can't find a way to fix it in a way that makes the user feels it's ok before validating it. But I can't make any promises :/

[mdo]

Seems like an issue with Chrome on Linux more than anything else. Let us know what you find out.

[cnicodeme]

Ok I'll do.

I'll try some tests with other browsers with other OSes too.

[cgunther]

Whoops, probably forgot to hit save. Try this one: http://jsfiddle.net/8JqF6/1/

I don't believe this is specific to Chrome/Linux. Using my jsfiddle, the latest versions of Chrome, Firefox, and Safari (on Mac) all consider the field invalid right at page load. Even when focused, it's considered invalid until an acceptable value is entered.

[cnicodeme]

Well, that's good in a way that it was not a local problem on my specific version of chrome/linux, but a real issue.

The bad news is, does this problem is fixable with css for bootstrap, or does it require a fix from the browsers ? :/

[mdo]

You could remove that block of CSS or remove the required attribute for now if you like. I think you'd need to open a bug with the browsers.

[cnicodeme]

This is odd

I have tested this on :

• Windows :
  ** Chrome 16 (16.0.912.77m)
  ** Firefox 6.0
  ** Firefox 10.0.1
  ** Opera 11.61
• Linux (Fedora 16 64b)
  ** Chrome 16.0.912.77
  ** Firefox 10.0

And all of them have the red border appears before the validation is made.
From what I can see, it seems the validation of required is made from the start, even before the form is submitted.

Since this "bug" appears in all browser, I'm not sure we should call it a bug, nor opening a bug ticket to those browsers
This behavior is defined in the W3C :

An element is :valid or :invalid when it is, respectively, valid or invalid with respect to data validity semantics defined by a different specification (e.g. [XFORMS11]). An element which lacks data validity semantics is neither :valid nor :invalid. This is different from an element which otherwise has no constraints. Such an element would always be :valid.
(source: http://www.w3.org/TR/css3-ui/#pseudo-validity)

From what I'm guessing, this is normal because for an input of type required, the state is invalid when there is no data in it. You can't wait from the user to click on the input, enter nothing, and leave the input to finally set it invalid. Your only option is to define it as invalid from the beginning.
We could say "this is wrong, we only have to wait for the form to be submitted to do the validation, it's what the browsers do ?" yes, but what happen if you don't "submit" this form, like in an ajax request with a a tag as the trigger?

Now, you are right, the only actual way is to remove this section (located in line 303 to 314 of forms.less) (which by the way, define two focus (:focus, and in the code &:focus)).

To be more semanticly correct, I guess you should remove the :required selector for displaying error. :required indicate there is an attribute "required" in the tag, not that this input is invalid (it's like :disabled).

Something like this would be more appropriate :

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

Now, that doesn't fix the problem at all, but should be more appropriate.

Sorry for the long post, this problem is quite special.

[snostorm]

+1 To it feeling odd to have a field appear invalid before any input has been provided. I'd almost rather just see this default style be removed to let site developers provide additional classes/js when needed. (If it is going to stay, perhaps the documentation should make reference to this happening.)

[pmanijak]

If you've arrived at this issue wondering how to stop the red border from happening (without hacking the source), and you want to keep the 'required' modifier), this removes the fancy border colors entirely:

input:required {
    border-color: #ccc !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

[chafey]

I agree with snostorm - if all the browsers are buggy, why include this style at all? I would rather have the default browser validation behavior than this. I was able to mostly workaround this by:

1. Overriding the bootstrap styles for the :invalid pseudo class to use the default bootstrap style
   and
2. Using the h5validate jquery plugin to apply the validation error style when the form failed to validate

Check out the jsfiddle here:

http://jsfiddle.net/GeuZU/1/

[caarlos0]

Same issue here with Chrome 24 - Linux.

@cnicodeme code fixes the problem here.

[lhid]

Still seeing this issue (only if input:invalid, textarea:invalid, select:invalid { /* border style */ } and respective field set to required)

Verified in:
Firefox Version 19.0.2 - Windows
Firefox Version 20.0.1 - Windows
Chrome 26.0.1410.64 m - Windows

Glad I found this thread.

[slave2zeros]

When you focus into a field, if it is required and there is no value, it is invalid. I'm not sure what's so confusing about this. As soon as you enter a value it will change to blue to indicate the requirement has been met.

[fredwh1te]

This "design" sure wasted a few hours for me. An empty input cannot be "invalid" if user hasn't even started an action.

[mdo]

@gnudle You're commenting on a three year old issue. Apologies the previous design decisions created problems for you. Those styles were removed a few versions later—perhaps as part of v3 actually.