Bootstrap's custom form validation doesn't work when using toggleable themes

[theaquarium]

Hi, great work with this theme, it looks great. However, when using the toggle-bootstrap*.css files, Bootstrap's form validation styles don't work. If the body has the bootstrap or bootstrap-dark class, the rest of the styles on the page work fine but form validation just doesn't show up. The red/green borders don't appear and feedback text stays hidden. I looked through the css and instead, to make validation show up, I need to give both the input fields and their parent elements the bootstrap or bootstrap-dark class as well. I've set up a form like this:

<form action="create_account.php" method="POST" id="register-form" class="was-validated" novalidate>
    <div class="form-group bootstrap">
        <label for="username">Username</label>
        <input type="text" class="form-control bootstrap" id="username" name="register_username" placeholder="Enter username" required>
        <div class="invalid-feedback" id="verify-password-feedback">Your username cannot be empty.</div>
    </div>
    <button type="submit" id="submit-register" class="btn btn-primary btn-block">Create Account</button>
</form>

If I replace the stylesheets on the page with the default bootstrap ones, it works fine without the extra classes, but on the toggle files it doesn't.

[Carl-Hugo]

That's weird, the bootstrap an bootstrap-dark classes should not impact form validation in any way, there are just "markers" that wrap the whole CSS. Are you sure that nothing else is interfering?

[theaquarium]

I'm pretty sure, since it worked fine with the default bootstrap styles. In the theme css files, the selector for enabling validation feedback is .was-validated .bootstrap-dark:invalid ~ .invalid-feedback, .was-validated .bootstrap-dark:invalid ~ .invalid-tooltip, .bootstrap-dark.is-invalid ~ .invalid-feedback, .bootstrap-dark.is-invalid ~ .invalid-tooltip, which means that the node with :invalid also needs to have the bootstrap-dark class, which in this case is the input tag. The same goes for the styles for the input itself, with the selector .was-validated .bootstrap-dark .form-control:invalid, .bootstrap-dark .form-control.is-invalid which requires the input's parent to have the bootstrap-dark class.

[Carl-Hugo]

Thanks, I'll take a look at why that is getting generated like that when I get a few minutes. Meanwhile, if you find more about that bug, feel free to provide me with that information or to contribute a fix.

[Carl-Hugo]

This small bug ended up being way harder to fix than usually expected, but it should work now. Please let me know if you encounter any other problems related to this issue.

[theaquarium]

Although it looks like the colored borders and form styling is working without the extra classes now, the validation text doesn't show up unless I add the was-validated class to the input elements. The selector for enabling the feedback text now reads .bootstrap-dark .was-validated:invalid ~ .invalid-feedback, which requires that the invalid element (input) have the was-validated class.

[Carl-Hugo]

Although it looks like the colored borders and form styling is working without the extra classes now, the validation text doesn't show up unless I add the was-validated class to the input elements. The selector for enabling the feedback text now reads .bootstrap-dark .was-validated:invalid ~ .invalid-feedback, which requires that the invalid element (input) have the was-validated class.

I'll take a look at that

[Carl-Hugo]

I added server-side validation back; everything should work now. Thanks for noticing this one out. I also added a sample form for that use case.

[theaquarium]

Sorry to keep reopening this, but that wasn't actually the problem I was having. The problem is that form validation text (that's the text with the valid-feedback and invalid-feedback classes) doesn't show up unless each individual input field is given the was-validated class. However, you should only need to apply that class to the parent form element.

[Carl-Hugo]

Sorry to keep reopening this, but that wasn't actually the problem I was having. The problem is that form validation text (that's the text with the valid-feedback and invalid-feedback classes) doesn't show up unless each individual input field is given the was-validated class. However, you should only need to apply that class to the parent form element.

That should be working. The following:

            <form>
                <div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="validationServer01">First name</label>
                        <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required="">
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="validationServer02">Last name</label>
                        <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required="">
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="validationServer03">City</label>
                        <input type="text" class="form-control is-invalid" id="validationServer03" required="">
                        <div class="invalid-feedback">
                            Please provide a valid city.
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="validationServer04">State</label>
                        <select class="custom-select is-invalid" id="validationServer04" required="">
                            <option selected="" disabled="" value="">Choose...</option>
                            <option>...</option>
                        </select>
                        <div class="invalid-feedback">
                            Please select a valid state.
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="validationServer05">Zip</label>
                        <input type="text" class="form-control is-invalid" id="validationServer05" required="">
                        <div class="invalid-feedback">
                            Please provide a valid zip.
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="">
                        <label class="form-check-label" for="invalidCheck3">
                            Agree to terms and conditions
                        </label>
                        <div class="invalid-feedback">
                            You must agree before submitting.
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">Submit form</button>
            </form>

Renders as:

---

the following:

            <form method="POST" class="needs-validation was-validated" novalidate="">
                <div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="validationCustom01">First name</label>
                        <input type="text" class="form-control" id="validationCustom01" value="Mark" required="">
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="validationCustom02">Last name</label>
                        <input type="text" class="form-control" id="validationCustom02" value="Otto" required="">
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="validationCustom03">City</label>
                        <input type="text" class="form-control" id="validationCustom03" required="">
                        <div class="invalid-feedback">
                            Please provide a valid city.
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="validationCustom04">State</label>
                        <select class="custom-select" id="validationCustom04" required="">
                            <option selected="" disabled="" value="">Choose...</option>
                            <option>...</option>
                        </select>
                        <div class="invalid-feedback">
                            Please select a valid state.
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="validationCustom05">Zip</label>
                        <input type="text" class="form-control" id="validationCustom05" required="">
                        <div class="invalid-feedback">
                            Please provide a valid zip.
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required="">
                        <label class="form-check-label" for="invalidCheck">
                            Agree to terms and conditions
                        </label>
                        <div class="invalid-feedback">
                            You must agree before submitting.
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">Submit form</button>
                <input name="__RequestVerificationToken" type="hidden" value="CfDJ8MxGWxH7zdpMlTWx7g10enC0ClK3cgjB1KRvo0EoPPd3WFdi3CI4NgzgamITP39vBiRkD8GevsOryXh7RiZBKMbqciEluxY9Fbv3WIqU5SGYYSi0a_-q6-oXgoDRgiJzR6nfG8yrgUOnu2irKwAkEcA">
            </form>

Renders as :

[theaquarium]

In both pictures you sent, the feedback text only shows up for the checkbox, even though there's feedback text set for all of the fields. Input fields with feedback text should look something like this:

[Carl-Hugo]

In both pictures you sent, the feedback text only shows up for the checkbox, even though there's feedback text set for all of the fields. Input fields with feedback text should look something like this:

Good catch, my eyes don't see anything anymore I guess... I'll take a look at fixing this tomorrow or this week.

[Carl-Hugo]

Take 3:

Please let me know if I missed something else.

If the colors were separated from the rest of the SCSS; it would have been so easier...

[theaquarium]

It works great now, thanks!