WIP Initial naive form validation fix

[patrickhlauke]

A first attempt at mocking up the actual JavaScript behavior for correct custom form validation handling

Not mergeable yet, just pushing this as a proof of concept. This should really be rolled into a proper plugin/JavaScript behavior.

x-ref #28414

[patrickhlauke]

@mdo i remembered you discussed potential use of data attributes for this ... here's the first naive stab at it. apart from the general ugliness of the code, one aspect that's still not ideal is that the feedback does show dynamically based on validity of the form control, meaning that the problem will still happen that if there was an initial feedback which is then tied to the control, if the validity changes dynamically (after the first submit), the feedback may be hidden, but it's still associated via aria-describedby and announced by AT. or it wants to show another feedback now, but it can't because the JS doesn't kick in. we likely need to also hook into the change event of each form control to trigger the whole processing dynamically (to keep up with the CSS that is evaluated dynamically)...

[patrickhlauke]

for this proof of concept, only fiddled with that first form at https://deploy-preview-28995--twbs-bootstrap.netlify.com/docs/4.3/components/forms/#custom-styles

[MartijnCuppens]

I like the idea. I would also provide an example with as well the data-validation-valid as data-validation-invalid attributes.

[Johann-S]

Like I said in Slack, I think it's a good idea but for me, it lacks of features, just accessibility, and a simple validation isn't enough for a core components

[patrickhlauke]

@Johann-S well, put it this way: the current use of just CSS to show/hide validation messages is not accessible. we either fix that in our core (and if it requires JS, add it as a plugin, as we can't expect authors to copy/paste an enormous chunk of code just to make things run correctly when they use it), or we ditch the validation messages altogether.

[patrickhlauke]

For me, the fact the validation errors aren't actually conveyed properly is a blocker. Annoyed I've not caught that sooner in v4, but...it is what it is.

[mdo]

Given #31666 and #31677, thinking we can isolate the JS changes here in another PR?

[XhmikosR]

Does this still apply to v5?

[patrickhlauke]

Does this still apply to v5?

yes, https://v5.getbootstrap.com/docs/5.0/forms/validation/ still has issues - custom styles and tooltips examples, the errors are not associated with the form controls and not announced by AT. also, in the support elements example, the errors are likewise not associated. for custom and tooltip, this needs javascript to dynamically inject the error, OR to dynamically add/remove the aria-describedby (as if it's there from the start, even when it's set to display:none, AT will announce the error otherwise)

[mdo]

This one is pretty out of date, is it still relevant?

[patrickhlauke]

the original problem still persists, but this got scuppered by my lack of JS chops / how to make the scripting etc apply automagically.

[XhmikosR]

@patrickhlauke can you explain a bit more in detail what you are missing? Maybe @GeoSot could help us out here.

[patrickhlauke]

@patrickhlauke can you explain a bit more in detail what you are missing? Maybe @GeoSot could help us out here.

what's really missing is some kind of clean way to actually make this part of Bootstrap's JS. how to generalise this somehow to make it easily usable, automatically adding/removing the aria-describedby ... ideally, somebody who's familiar with BS' slightly over-complicated JS way of doing things. maybe @rohit2sharma95 can have a look as well?

[patrickhlauke]

Superseded by #34043