Validating React-Quill with react hook form

See original GitHub issue

This is not an issue, it is more of a contribution and can be closed as soon as it is filed, I just wanted to contribute how I managed to validate Quill with React Hook Form, I could not find a readily available solution. According to the React hook website validation can be done in different ways but none of them worked out of the box, I kept encountering the split('-') error, I ended up with the below solution


     <Controller
                                    control={control}
                                    name="description"
                                    rules={{
                                        validate: value => wordCounter(value) >= 10 || "Enter at least 10 words in the description"
                                    }}
                                    error={errors.description}
                                    render={({ onChange, onBlur, value }) => (
                                        <ReactQuill
                                            theme="snow"
                                            onChange={(description, delta, source, editor) => onChange(description)}
                                            value={value || ''}

                                        />
                                    )}
                                />

If value is set as value={value} you will encounter this error Error: You are passing the deltaobject from theonChangeevent back asvalue. You most probably want editor.getContents() instead. See: https://github.com/zenoamaro/react-quill#using-deltas

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:6

github_iconTop GitHub Comments

2reactions
hrahimi270commented, Jul 22, 2020

@aubryll what is the solution on this?

0reactions
aubryllcommented, Jun 18, 2021

I have left a comment

Hi, @aubryll this solution isn’t working for me. Can you please check this issue? https://stackoverflow.com/questions/67983695/how-to-validate-react-quill-with-react-hook-form-and-yup

I have left a comment on your stackoverflow question my username is Nemo.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to validate React-quill with React-hook-form and yup?
Normal inputs and textareas working as expected, but validation for react-quill is not working. These are my code snippets. Custom react-quill ...
Read more >
quill-with-react-hook-form-validation - CodeSandbox
VS Code's tsserver was deleted by another application such as a misbehaving virus detection tool. Please reinstall VS Code. Manage Extension.
Read more >
useController | React Hook Form - Simple React forms validation
Performant, flexible and extensible forms with easy-to-use validation.
Read more >
Validating React InputsWith React Hook Form - Medium
Required Fields. The most simple, yet very common, validation is to make sure that an input component contains input from the user. React...
Read more >
React Hook Form Validation with Complete Examples | refine
What is refine? Project setup. Integrating React Hook Forms. Validating forms with React Hook Forms; Schema Validation; Handling errors; How to ...
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