Menu
I need a little help with form validation with Radio element in a page that use Bootstrap 4.
I need to add the error message below the radio element:
<div class="invalid-feedback">Please choose an option</div>
And I have the following code inside my form:
<section>
<h6>Lorem Ipsum</h6>
<p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
<label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
<label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
</div>
</section>
If I add the invalid-feedback inside the form-check element I see the error message below the single element, if I put it outside the form-check element the error message doesn't appear.
What is the right way to do that?
439
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 .
Required attribute: If you want to make an input mandatory to be entered by the user, you can use the required attribute. This attribute can be used with any input type such as email, URL, text, file, password, checkbox, radio, etc. This can help to make any input field mandatory.
The way I worked around this was to put the invalid-feedback div inside the last form-check, then used margins to line up the div the way I wanted.
Inline:
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
<label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
<label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
<div class="invalid-feedback" style="margin-left: 1em">Please choose an option</div>
</div>
Non-inline:
<div class="form-check">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
<label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
<label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
<div class="invalid-feedback" style="margin-left: -1.25em">Please choose an option</div>
</div>
You can still put it outside the form-check div using a hidden radio button.
If none of the two visible radio buttons are checked, the error message will show
<section>
<h6>Lorem Ipsum</h6>
<p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
<label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
<label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
</div>
<div>
<input class="display-d" type="radio" name="agreeMarketProfiling" value="" required>
<div class="invalid-feedback">Please choose an option</div>
</div>
</section>
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
