New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Validation Not Working with Input-Groups #24709

Closed
jehugaleahsa opened this Issue Nov 7, 2017 · 1 comment

Comments

Projects
None yet
2 participants
@jehugaleahsa

jehugaleahsa commented Nov 7, 2017

  • Operating system and version: Windows 10
  • Browser: Chrome, Firefox, etc.

I have to use the custom validation classes (http://getbootstrap.com/docs/4.0/components/forms/#server-side) since some of my validation isn't covered by the browser, via is-valid, is-invalid and invalid-feedback. I should point out this type of validation isn't strictly "server side", just manual.

My issue involves input-groups and the invalid-feedback CSS classes. Currently, the CSS to display invalid-feedback requires the the control to be :invalid inside of the .was-validated class or that it be right next to the <input />, via the ~ CSS selector and .is-invalid.

I can't use .was-validated since the validation is manual and the :valid pseudo class will be applied. And since I am using an input-group, the <div class="invalid-feedback"> isn't directly next to the <input />. It would be nice if additional CSS rules could be added to handle adjacent input-groups.

As a workaround, I am just setting display: block whenever I set is-invalid.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Nov 8, 2017

Member

Duplicate of #23454.

Member

mdo commented Nov 8, 2017

Duplicate of #23454.

@mdo mdo closed this Nov 8, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment