-
-
Notifications
You must be signed in to change notification settings - Fork 78.5k
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
Make a form validation handler | handle form messages #34043
base: main
Are you sure you want to change the base?
Conversation
almost perfect. one annoying issue though: if the form field already has an also, not sure if this PR also touches on the tooltip case, but here the generated markup seems incorrect ... the actual valid/invalid tooltip sits outside of the |
After submitting with empty values, the username results in this structure
note that this now gives both the what i meant above, which may not have been clear: the end result should be that the
|
also, the latest changes seem to have broken the tooltips case https://deploy-preview-34043--twbs-bootstrap.netlify.app/docs/5.0/forms/validation/#tooltips which now just show the browser default error handling rather than the custom tooltips |
btw probably worth saying: it might look like i just come in here to point out what's wrong... but this is already a great way forward! if we can tweak these last few bits, it'll be wonderful to have validation properly addressed in BS. |
You are right on this. give me some minutes
got it. Thanks |
it's almost perfect now, thanks for indulging me there @GeoSot. the last aspect that would be good to address is potentially tricky. if you try to submit an invalid/incomplete form, and you get the error messages...if you then go back and correct the errors, visually the error message disappears and the green success styling is shown. however, behind the scenes, the i think the only way around this would be to watch for a |
i.e. after validation once the user does go back and edit, currently it visually then shows this and the markup for that username input is
i.e. note that |
last outstanding aspect, if possible, is removing the reference to the error message in i.e. currently, even after filling in a previously empty field, and the field now not being valid, the error message is still associated/announced ... and with |
9766d30
to
0187072
Compare
getting there :) i see the however, doing multiple erroneous submissions results in error messages being multiplied... in the case of the tooltip variant, visually there's only one tooltip, but the lastly, in the "supported elements" case, the initial errors aren't associated with the form fields. and editing the form to then be valid, some of the errors remain visible (but still not announced) https://deploy-preview-34043--twbs-bootstrap.netlify.app/docs/5.0/forms/validation/#supported-elements |
thank you @patrickhlauke :) I was aware of duplicated feedback elements, but I wasn't sure how to solve it. Although, I think I have found a valid solution.
I didn't change something there (at least yet), as it is a fixed example that shows the classes usage. (it works the same way on our published docs) In order to do our checks, the only changed sections are
When we finish the basic tests, we can see more on documentation area, and js-code needs to be discussed|optimized with the help of the js team |
conceptually, it likely needs to do a check of "if the relevant error is already shown/the
we probably need to make those dynamic as well (starting off with an already present error, but then following the same JS logic that removes any reference/hides the error message/etc once user interacts with it) |
added a commit that normalises all |
i see the issue of multiple errors appearing when hitting submit multiple times has now been fixed. great stuff. out of interest, how easy/hard would it be to hook up the validation script to https://deploy-preview-34043--twbs-bootstrap.netlify.app/docs/5.0/forms/validation/#supported-elements as well? as currently the CSS changes kick in (partially) and it leaves this in weird semi-states... |
done
I think it will be a bit more interventional, than it should
It can be done, but it is considerable better to make
done |
7316a4d
to
2f3ad96
Compare
9c8311e
to
1bd6c94
Compare
5275b43
to
aa5f413
Compare
Just for my own sanity (as I had lost track of where we were at with this), made a quick recording using Chrome/NVDA of how this all currently shakes out bootstrap-form-validation-pr34043.mp4
|
@patrickhlauke for start, I want to really thank you for your patience and your help. I saw the review above and :
seems to be an issue of docs, because we are just indicating the proper markup in case of server validation, fixed in: 07240fe
seems to be an issue of docs, which I handled, adding the |
6b4858d
to
f9041cc
Compare
snuck in a tweak to the documentation text itself... |
@GeoSot you'll probably also want to add a bullet point to the "how it works" section, to mention the extra scripting that ties the form control to its feedback/error message when it appears. just draft it up, happy to give it a read/tweak once there https://deploy-preview-34043--twbs-bootstrap.netlify.app/docs/5.2/forms/validation/#how-it-works |
Thank you @patrickhlauke 🙂 I have it in my mind too, but I am holding myself, till I get some feedback from other @twbs/team members (or contributors), concerning the usefulness of this idea, and opinions over the JavaScript code. |
add "aria-describedby" attribute on "supported elements" section add "aria-describedby" attribute on server side succeed validation messages
* remove the warning about custom errors and tooltips not being accessible ... they now mostly are * change the phrasing for server-side validation, so that *all* feedback (whether valid or invalid) should have `aria-describedby`
498df8a
to
e1047e1
Compare
A Javascript handler for form|fields messages.
As a developer, I have been several times, in the awkward position, needing to implement custom code, that will co-operate with bs-form fields. So, many times I had the same thought. "What if bootstrap provided the base 'JS adapter' for its fields"
This PR tries to provide a Bootstrap component, that automatically handle browser validation messages, and in addition will give the opportunity to use custom, given feedback messages.
In advance, it contains JavaScript code, providing
clear
these messages,validation
clear
appended feedbackssuccess | error | info
feedback messagesNeeds:
Cons:
Adds a significant size as it introduces two new classes 🤔
Related #28414
close #28995
Preview : https://deploy-preview-34043--twbs-bootstrap.netlify.app/docs/5.2/forms/validation/#custom-styles