Fix #171: Custom radio|checkbox inline error

[newerton]

Fixed issue #171

Moved element out of div.custom-control

Q	A
Is bugfix?	yes
New feature?	no
Breaks BC?	no
Tests pass?	yes
Fixed issues	#171

[simialbi]

According to bootstrap 4 documentation the invalid feedback is inside the div of the last element (https://getbootstrap.com/docs/4.3/components/forms/#validation):

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

[newerton]

According to bootstrap 4 documentation the invalid feedback is inside the div of the last element (https://getbootstrap.com/docs/4.3/components/forms/#validation):

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

In standard mode it is documented. But in inline format, div is wrong.

[simialbi]

Where did you find that? I couldn't find any inline validation example in bootstrap documentation...

[newerton]

Where did you find that? I couldn't find any inline validation example in bootstrap documentation...

There is no documentation! But in inline mode, the .invalid-feedback is wrong.

Bootstrap itself has no documentation for it.

[simialbi]

I'm sorry, but I don't see what this pr should make better. It just does that the validation in default forms don't work any more...

[newerton]

I'm sorry, but I don't see what this pr should make better. It just does that the validation in default forms don't work any more...

Why don't work any more?

What is wrong is div being inside custom-control.

There is already a parent div, there is nothing wrong with invalid-feedback being out of custom-control.

[samdark]

Doesn't seem to pass tests: https://travis-ci.org/yiisoft/yii2-bootstrap4/jobs/592198926

[simialbi]

There is already a parent div, there is nothing wrong with invalid-feedback being out of custom-control.

It is: According to the example of custom form lists of bootstrap 4 here (https://getbootstrap.com/docs/4.3/components/forms/#supported-elements):

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
</div>

Is the invalid-feedback inside the last custom-control (at least in a default list)

[newerton]

I already commented! Vertically the validation is correct! Inline validation is incorrect.

Issue closed! No chance of compromise!