form-check-inline and invalid-feedback rendering issue

This is a valid way to render inline inputs. In order to show invalid feedback we need to cram it on the last container there or it will be display: none. Obviously it renders like hell. (can’t get JS bin to work, sorry)

<div class="form-check form-check-inline">
  <input class="form-check-input is-invalid" type="checkbox" value="x" name="user[test][]" id="user_test_x" />
  <label class="form-check-label" for="user_test_x">X</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input is-invalid" type="checkbox" value="y" name="user[test][]" id="user_test_y" />
  <label class="form-check-label" for="user_test_y">Y</label>
  <div class="invalid-feedback">is invalid</div>
</div>

I don’t have a solution, just providing an example.

For server-side validations it’s easy to override css and add display: block for invalid-feedback.

Demo: https://codepen.io/anon/pen/vdGNWo

[mlindberg2]

If anyone is interested in one solution, I ended up using some javascript in the form validation,

if (!$("input:radio[name='multipleradiobuttonsetname']").is(":checked")) { $("#idforinvalidsmessage").css("display", "block"); } form.classList.add('was-validated');

and also at the bottom of the page,

`<script>

$(document).ready(function(){

$("input:radio[name='multipleradiobuttonsetname']").click(function(){
    $("#idforinvalidsmessage").css("display", "none");
	
});

});

</script>`

Not exactly elegant, but at least now the invalid feedback can be placed anywhere on the page and outside a radio div.

[GBH]

As long as invalid feedback is generated by the server. You can just add this css rule and everything should render acceptably:

.form-check.form-check-inline .invalid-feedback {
  display: block;
}