Currently when using Hilla react-form, validation runs on each keystroke, resulting in the error message appearing right away before I’ve finished typing in eg. my full email address. In addition, this results in unnecessary flickering. This is not very user friendly behavior. I should be able to fill in the form, and see whatever errors I made when I submit the form. When focusing the field with the error, the error message should disappear. Is there anyway to configure this validation strategy?
Can you at least verify that this works as intended?
Hi @Rinbo,
in the past I worked with AutoForm and useForm and I was not experiencing the problems you describe. Could you provide a code example to reproduce the problem?
It is straight from the Hilla docs. There is even a gif illustrating the behavior. See here: Validating User Input | Forms | Guides | React | Hilla Docs
Well, I guess this should answer your question, if this works as intended with yes. What about the “unnecessary flickering” you mentioned in your post? I’m not experiencing such a flickering.
Because the validation is run on every onChange event, the component is re-rendered on every keystroke. I don’t think many people would notice this, but I do. Anyways, I like the idea of this form validation. It automates a lot of annoying boring stuff, but the devil is in the details. I’ll have to roll my own implementation if this cannot be configured out of the box.
Depending on the validation rule, validating on every change is not always the best solution. Validating an email is a good example. You can add a custom validator for every field in a form and handle the validation for this field the way you want: https://hilla.dev/docs/react/guides/forms/binder-validation#defining-custom-client-side-validators. Your custom validator will be invoked on every change, but you have more control about the validation. For example, you could add a debounce to ensure the validation won’t start immediately.
Validating an email is a good example.
Let’s agree to disagree on this one.
Adding custom client side validators on each field defeats the point of all the automaticity you get by adding validation annotations on your backend model. That was kind of the selling point of why I wanted to try this out (having developed many apps with a standalone java spring backend and a react SPA frontend).
@Rinbo - can you create a ticket on GitHub - vaadin/hilla: Build better business applications, faster. No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development. to make sure the team notices this? I agree that it would be nice to be able to configure the eagerness of validations.
1 Like