Created by: Anahkiasen
Currently with Bootstrap if you set a field as required="true"
, Bootstrap applies live control-group states if the browser set the field as :invalid
.
More clearly that means that if you assign a pattern="[some regex]"
attribute on a field, and then type something that doesn't match that pattern, the field turns red. Which is good ! That's perfect, the problem is, that live validation only works when the field is also set to required. This is due to the following bit of CSS :
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}
The live validation is only active when the field has the :required
state which limits things. Second of all, the whole bit of code doesn't make that much sense since we start from the principle that all fields are set to :focus
and then afterwards we apply a second :focus
on them.
This pull request fixes that and allows all invalid to turn red, whether they are required or not. Tested on a project and all is working good.