Menu
I am using the Bootstrap 4.0 (non-beta) validation and have a problem to display the invalid-feedback text.
<div class="form-row">
<label class="form-control-label">Name:</label>
<div class="col-4">
<input class="form-control is-invalid" min="0" type="number"/>
</div>
<div class="col-4">
<div class="invalid-feedback">
Invalid Feedback Text
</div>
</div>
</div>
In the above example the text "Invalid Feedback Text" is not displayed.
The reason for it is that the invalid-feedback div is not a direct sibling of the the input control.
This has been an issue with the alpha/beta versions however I was under the impression that this has been fixed in the 4.0 release. (At least the relevant ticket has been closed.)
So, how can I use the bootstrap validation if I can not have the feedback text as a direct sibling of the relevant input control? (It is simply not feasible in my application.)
Here is a fiddle: https://jsfiddle.net/zygrsrox/
402
Bootstrap labels are components which separate content placed in the same wrapper, but in a separate pane. Only one pane can be displayed at any time.
This is pretty useful in giving a visual indication to the user when a form field is required. There will now be a nice little “*” after the label for “Required Field”.
Bootstrapping Validation is a way to predict the fit of a model to a hypothetical testing set when an explicit testing set is not available.
Here's how form validation works with Bootstrap: HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> .
You're right, the intention is that the input is a sibling of the feedback message. The only way you can force the invalid-feeback to show is to use something like d-block (or some custom CSS selector). Perhaps you can add d-block programatically in your app during validation.
<div class="form-row">
<label class="form-control-label">Name:</label>
<div class="col-4">
<input class="form-control is-invalid" min="0" type="number"/>
</div>
<div class="col-4">
<div class="invalid-feedback d-block">
Invalid Feedback Text
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
