Kartik's ActiveForm required for Bootstrap 4

[pxao02]

Prerequisites

• [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [X] The issue still exists against the latest master branch of yii2-password.
• [X] This is not an usage question. I confirm having gone through and read the documentation and demos.
• [X] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [X] I have attempted to find the simplest possible steps to reproduce the issue.
• [ ] I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

The docs state that using kartik\form\ActiveForm is optional. So I used the default yii\bootstrap4\ActiveForm in combination with the password input widget. However, there's an issue with the red error text.

1. Create view using yii\bootstrap4\ActiveForm and kartik\password\PasswordInput while setting Bootstrap version to 4
2. Open page in browser
3. Type 1 character in password input box (so as to fail the validation)

Expected behavior and actual behavior

Expected: red border and red error text below the input box as per Bootstrap 4.

Actual: only red border, the red error text is not visible.

Cause of problem

The original password input box is replaced with the widget, where the input is deeper in the DOM. The original Bootstrap CSS requires the error text div to be a sibling from the input in order to trigger a display:block. Since they are not siblings, the error text remains display:none and will not show.

Solution

The required CSS to get the error text to display:block is present in the CSS that comes included with Kartik's ActiveForm. The solution is therefore to use kartik\form\ActiveForm instead of yii\bootstrap4\ActiveForm.

Suggested change

Update the docs to reflect that optimal function in Bootstrap 4 is only when the password widget is combined with Kartik's ActiveForm.

With Bootstrap 3 it works fine.

Environment

N/A

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.