Created by: fiznool
Currently, the form feedback states cascade as follows:
.has-success {}
.has-warning {}
.has-error {}
This results in any elements with the class of .has-error
overriding children with the class .has-warning
or .has-success
.
Consider the following form grouping:
This is a 'complex' form control, with multiple inputs nested inside a single form-group
. The validation rules for this control are as such - if any of the inputs are not a number, the entire form control should be invalid - however, I'd like to show which individual input is in error.
I would like to achieve this with the following markup:
<form>
<div class="form-group has-error">
<span class="label label-danger pull-right">Invalid</span>
<label for="relativeDays" class="control-label">Enter Duration</label>
<div class="row">
<div class="col-xs-4">
<div class="input-group has-success">
<input type="number" class="form-control" id="relativeDays">
<div class="input-group-addon">days</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group has-success">
<input type="number" class="form-control" id="relativeHours">
<div class="input-group-addon">hours</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group has-error">
<input type="number" class="form-control" id="relativeMins">
<div class="input-group-addon">mins</div>
</div>
</div>
</div>
<p class="help-block">Delay this task by the specified number of days, hours and minutes after the previous task is completed.</p>
</div>
</form>
Notice the .has-error
on the parent form-group
, indicating that the form control is invalid, however the individual has-success
and has-error
classes on the child inputs.
With the current cascade rules, this is not possible, but this PR inverts the cascade, allowing for this possibility.