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?
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:
Non-inline: