Bootstrap 4 beta 2 new form markup

[nadar]

I am currently working on a bootstrap 4 beta 2 form (https://github.com/luyadev/luya-bootstrap4) but Bootstrap 4 beta 2 changed significant the markup of how to display errors (https://getbootstrap.com/docs/4.0/components/forms/#server-side).

<div class="col-md-3 mb-3">
      <labe>Zip</label>
      <input type="text" class="form-control is-invalid" placeholder="Zip">
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
</div>

the error class is-invalid (or opposite is-valid) must be set to the input field and not as before to the wrapper div (in this case<div class="col-md-3 mb-3">).

It looks like the current ActiveForm/ActiveField can not handle this new markup. Do we have any general idea how to solve this problem? Introduce a new ability to trigger error/success classes on the field? Or are solutions existing?

[samdark]

Do you use 2.1 branch?

[nadar]

Well, i am not using this repo but i saw that this repo will migrate to bootstrap 4 as well, so unfortunately the same problem will appear in the future. So i was taking a look at 2.1 branch in order to check if you have already a fix for the problem.

Current ActiveField and ActiveForm (in 2.1 branch of course) are still using the old bootstrap 4 alpha markup:

https://github.com/yiisoft/yii2-bootstrap/blob/2.1/ActiveField.php https://github.com/yiisoft/yii2-bootstrap/blob/2.1/ActiveForm.php

Even the commit message says so.

[nadar]

I did research on bootstrap community and Yii ActiveForm/ActiveField to:

a. See if there is an option in bootstrap 4 beta 2 to set the field state (error, valid) on the parent wrapper (like before), current status: no b. See if there is an option to trigger error & valid classes on Yii's ActiveField {field}} element: no

So i think there must be a new option which can trigger a valid/invalid class on the input field itself, and adjust also the client scripts to do so.

[nadar]

Yesterday bootstrap beta 3 was released and as expected the server side validation classes has not changed and will also not in official release.

"Houston, we have a problem."

(just adding this for the sake of completeness)

[samdark]

OK. Then it's safe to adjust 2.1 accordingly.

[nadar]

Maybe this could be a general feature for ActiveForm/ActiveField to trigger validation class directly on the input field. So maybe it should be a yii2 core feature and moved to main repo? So other people would profit from these feature as well as other css framework adoptions with such a markup (foundation, skeleton, etc.) would benefit as well.

[samdark]

Yes. Makes sense.

[nadar]

can the yii bot move the issue or should i create new one referring to this issue?

[samdark]

Create new one.

[adiramardiani]

@samdark @nadar Bootstrap 4 stable release now, yes the form markup is more flexible, panel and some component is replace by card, is the time for yii2 bootsrap 2.1 release ?

[samdark]

Almost. We need to fix as much as possible in v3 branch and release it first.

[nadar]

Fixed with Yii version 2.0.14. Use:

'validationStateOn' => ActiveForm::VALIDATION_STATE_ON_INPUT