title: How to validate React-quill with React-hook-form and yup?
body: <p>I used</p>
  <ul>
  <li>react-quill for one of form element.</li>
  <li>react-hook-form form validation</li>
  <li>yup/yup resolver for validation schema</li>
  </ul>
  <p>Normal inputs and textareas working as expected, but validation for react-quill is not working.</p>
  <p>These are my code snippets.</p>
  <p>Custom react-quill wrapper element</p>
  <pre><code>import React, { useRef, useState } from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import ReactQuill from &quot;react-quill&quot;;
  import &quot;react-quill/dist/quill.snow.css&quot;;
  import &quot;react-quill/dist/quill.bubble.css&quot;;
  import &quot;react-quill/dist/quill.core.css&quot;;
  
  function Editor(props) {
    const [theme, setTheme] = useState(&quot;snow&quot;);
    const { id, value, inputRef, placeholder, onChange } = props;
  
    return (
      &lt;ReactQuill
        id={id}
        ref={inputRef}
        theme={theme}
        onChange={onChange}
        value={value}
        modules={{
          toolbar: {
            ...Editor.modules.toolbar,
            handlers: {
              //   image: handleImageUpload,
            },
          },
          ...Editor.modules,
        }}
        formats={Editor.formats}
        bounds={&quot;.app&quot;}
        placeholder={placeholder ?? &quot;&quot;}
      /&gt;
    );
  }
  
  /*
   * Quill modules to attach to editor
   * See https://quilljs.com/docs/modules/ for complete options
   */
  Editor.modules = {
    toolbar: [
      // [{ header: '1' }, { header: '2' }, { font: [] }],
      // [{ size: [] }],
      [{ size: [&quot;small&quot;, false, &quot;large&quot;, &quot;huge&quot;] }], // custom dropdown
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [&quot;bold&quot;, &quot;italic&quot;, &quot;underline&quot;, &quot;strike&quot;, &quot;blockquote&quot;],
      [
        { list: &quot;ordered&quot; },
        { list: &quot;bullet&quot; },
        { indent: &quot;-1&quot; },
        { indent: &quot;+1&quot; },
      ],
      [&quot;link&quot;, &quot;image&quot;, &quot;video&quot;],
      [&quot;clean&quot;],
      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ font: [] }],
      [{ align: [] }],
    ],
    clipboard: {
      // toggle to add extra line breaks when pasting HTML:
      matchVisual: false,
    },
  };
  /*
   * Quill editor formats
   * See https://quilljs.com/docs/formats/
   */
  Editor.formats = [
    &quot;header&quot;,
    &quot;font&quot;,
    &quot;size&quot;,
    &quot;bold&quot;,
    &quot;italic&quot;,
    &quot;underline&quot;,
    &quot;strike&quot;,
    &quot;blockquote&quot;,
    &quot;list&quot;,
    &quot;bullet&quot;,
    &quot;indent&quot;,
    &quot;link&quot;,
    &quot;image&quot;,
    &quot;video&quot;,
  ];
  
  /*
   * PropType validation
   */
  Editor.propTypes = {
    placeholder: PropTypes.string,
  };
  
  export default Editor;
  
  </code></pre>
  <p>This is form component</p>
  <pre><code>const validationSchema = Yup.object().shape({
      companyName: Yup.string().required(&quot;Company Name is required&quot;),
      ... ...
  
      jobDescription: Yup.string().required(&quot;Job description is required&quot;), // react-quill
  
      ... ...
      howtoApply: Yup.string().required(&quot;This field is required&quot;),
      applyUrl: Yup.string().required(&quot;This field is required&quot;),
      applyEmail: Yup.string().required(&quot;This field is required&quot;),
  
    });
  
  const formOptions = { resolver: yupResolver(validationSchema) };
  
  const { register, handleSubmit, reset, control, formState } = useForm(
      formOptions
    );
  
    useEffect(() =&gt; {
      console.log(&quot;formState&quot;, formState); // log for form value changes
    });
  
  
      ... ... ...
  
  &lt;Controller
                  control={control}
                  name=&quot;jobDescription&quot;
                  // rules={{
                  //   required: &quot;Description must have some content.&quot;,
                  //   validate: (value) =&gt; {
                  //     console.log(&quot;Controller&quot;, value);
                  //     return (
                  //       value.split(&quot; &quot;).length &gt; 10 ||
                  //       &quot;Enter at least 10 words in the body.&quot;
                  //     );
                  //   },
                  // }}
                  render={({
                    field: { onChange, onBlur, value, name, ref },
                    fieldState: { invalid, isTouched, isDirty, error },
                    formState,
                  }) =&gt; (
                    &lt;Editor
                      onChange={(description, delta, source, editor) =&gt; {
                        console.log(
                          &quot;onChange:description&quot;,
                          description,
                        );
                        console.log(&quot;inputRef&quot;, ref);
                        onChange(description);
                      }}
                      value={value || &quot;&quot;}
                      inputRef={ref}
                      theme=&quot;snow&quot;
                      id=&quot;jobDescription&quot;
                    /&gt;
                  )}
                /&gt;
  </code></pre>
  <p>I checked these issues,
  <a href="https://github.com/zenoamaro/react-quill/issues/635" rel="nofollow noreferrer">https://github.com/zenoamaro/react-quill/issues/635</a></p>
  <p><a href="https://github.com/react-hook-form/react-hook-form/discussions/3372" rel="nofollow noreferrer">https://github.com/react-hook-form/react-hook-form/discussions/3372</a></p>
  <p>but still not working.</p>
  <p><strong>Current behavior</strong></p>
  <p>I confirmed the changed markdown logged in console (onChange function in Editor), but can't see formState log of useEffect hook upon editor change.
  (regardless of add rules prop to Controller or not)</p>
  <p>Any help would be much appreciated</p>
  <p>Thank you</p>