question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form validate onBlur and FormField validate prop broken in 2.10.0

See original GitHub issue

FormFields 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

  1. Set Form’s validate prop to “blur”. Form triggers FormField validations on removing focus.
  2. Set a FormField’s validate prop to an array: each of the validations, function or object style, should trigger per the docs.

Actual Behavior

  1. Form only triggers validation function on submit, regardless of validate prop.
  2. 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:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
ShimiSuncommented, Feb 21, 2020

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.

1reaction
ShimiSuncommented, Feb 18, 2020

Yes, @jHwls thank you for your feedback, expect a lockdown in the next couple of days.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found