Form validate onBlur and FormField validate prop broken in 2.10.0
See original GitHub issueFormFields won’t validate on blur, despite setting the Form validate
prop to “blur”. Additionally, setting a FormField validate
prop to an array doesn’t work, although the docs list this as an option. Using a function does work however.
Additionally, it would be nice to be able to imperatively trigger certain behaviors of the Form using a ref where Grommet’s in-built functionality doesn’t meet requirements. Is it possible to expose the submit
and validate
functions of the Form so that they can be triggered by, for instance, formRef.current.validate()
?
Expected Behavior
- Set Form’s
validate
prop to “blur”. Form triggers FormField validations on removing focus. - Set a FormField’s
validate
prop to an array: each of the validations, function or object style, should trigger per the docs.
Actual Behavior
- Form only triggers validation function on submit, regardless of
validate
prop. - FormField won’t trigger any validation errors if an array is provided to the
validate
prop.
URL, screen shot, or Codepen exhibiting the issue
https://codesandbox.io/s/grommet-sandbox-fj1jn
Your Environment
- Grommet version: 2.10.0
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
react-hook-form: Validation not working when using onBlur ...
In your code, the form mode is onBlur . it means the validation is triggered on blur event (unfocus the input). When you...
Read more >FAQs | React Hook Form - Simple React forms validation
Performant, flexible and extensible forms with easy-to-use validation. ... React Hook Form relies on uncontrolled form, which is the reason why the register ......
Read more >use-form - Mantine
Validation errors occur when defined validation rules were violated, initialErrors were specified in useForm properties or validation errors were set ...
Read more >Form Validation with JavaScript
Shows you how to write a script that ensures your form is filled in correctly before it's sent to your server. Great for...
Read more >Custom Form Validation in React with Redux Middleware
As described in the previous section, every time a user triggers the onBlur event of a particular form field (name, email, terraforming ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Done. Grommet 2.11.0 is live and ready, check out the release notes https://github.com/grommet/grommet/releases/tag/v2.11.0 I’ll be closing this issue, please let us know if you need anything else.
Yes, @jHwls thank you for your feedback, expect a lockdown in the next couple of days.