Client-side form validation examples in the snippets and demos
Created by: garrett
Is this a new component or an extension of an existing one?
Forms, inputs, other freeform form elements
Describe the feature
As far as I can find, there is no mention of form validation aside from a UI and design perspective. PatternFly says it should be done both client-side and server side, but provides no examples of how it can be done client-side.
Server side is out of scope and is handled with the relevant classes and fields already. But client-side seems like a rather big omission. Most projects will use a mix of both techniques, so having examples of client-side in PF examples and docs would be valuable.
I would have expected some examples, likely using HTML5 form validation, including constraints, in both the HTML and React examples on the website.
Additionally, it would be nice PF+React would handle this itself and do the right thing in the background, unless it passes through to the HTML, then just switching the demos in the documentation could suffice. (Such as handling common types of validation via PF+React, such as emails and URLs, plus allow for custom validation as it can't handle everything itself.) But PF+React should be filed as a follow-up issue on the React repo, once this issue has been answered with general guidance.
If it is expected that developers should be using HTML validation directly, then it should be mentioned (with links) in the docs and also used as examples on the website (both in HTML and React). If PF+React should handle it in a different way (regardless of the React implementation), then that should also be included in the examples.
(Of course, I could be missing something. But if that's the case, then it should probably be more obvious on the website and/or the search should be improved... because I'm not the only one who can't find this information on the website from my team.)
Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
The problem is that there are only visuals (and some docs for explanation) for this feature.
Any other information?
References on the topic: