title: How to validate error in form inside next js
body: <p>Hi I want to show success when the form is submitted and error's if error occur using react toastify
  library but unable to build logic. Can anybody help?</p>
  <p>here the code of the form</p>
  <pre><code>function Form({ _id }) {
      const {
          register,
          handleSubmit,
          formState: { errors },
      } = useForm();
      const onSubmit = (data) =&gt; {
          
          fetch('/api/CreateComment', {
              method: &quot;POST&quot;,
              body: JSON.stringify({ ...data, _id })
          })
      }
      return (&lt;&gt;
          &lt;ToastContainer
              position=&quot;top-right&quot;
              autoClose={5000}
              hideProgressBar={false}
              newestOnTop={false}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
          /&gt;
          &lt;form id='my-form' onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;div data-aos='fade-right' data-aos-delay='100' className=&quot;overflow-hidden mt-8 mb-4 w-[90vh] mx-auto bg-gray-100 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600&quot;&gt;
                  &lt;label htmlFor=&quot;name&quot; className=&quot;block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300&quot;&gt;&lt;/label&gt;
                  &lt;input {...register('name', { required: true })} type=&quot;text&quot; id=&quot;name&quot; className=&quot;mb-2 radius block p-2 w-full text-gray-900 bg-gray-50 rounded-lg border-gray-300 sm:text-xs dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white&quot; minLength={3} placeholder=&quot;Your Name&quot; /&gt;
                  {errors.name  &amp;&amp; &lt;p className='text32'&gt;Name is required. Minimum length should be 3&lt;/p&gt;}
                  &lt;div className=&quot;py-2 px-4 bg-white rounded-t-lg dark:bg-gray-800&quot; &gt;
                      &lt;label htmlFor=&quot;comment&quot; className=&quot;sr-only&quot;&gt;Your comment&lt;/label&gt;
                      &lt;textarea {...register('comment', { required: true })} id=&quot;comment&quot; rows=&quot;4&quot; minLength={5} className=&quot;px-0 w-full text-sm  text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400&quot; placeholder=&quot;Write a comment...&quot;&gt;&lt;/textarea&gt;
                      {errors.comment &amp;&amp; &lt;p className='text32'&gt;Minimum Comment length should be 5&lt;/p&gt;}
                  &lt;/div&gt;
                  &lt;div className=&quot;flex justify-between items-center py-2 px-3 border-t dark:border-gray-600&quot;&gt;
                      &lt;button onClick={notify} type=&quot;submit&quot; data-aos='fade-up' data-aos-delay='400' className=&quot;btnz inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800&quot;&gt;
                          Post comment
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;p data-aos='fade-left' data-aos-delay='700' className=&quot;h-[8vh] w-[70vh] m-auto text-xs text-gray-500 dark:text-gray-400&quot;&gt;Remember, contributions to this topic should follow our &lt;a href=&quot;#&quot; className=&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;&gt;Community Guidelines&lt;/a&gt;.&lt;/p&gt;
      &lt;/&gt;
      );
  }
  </code></pre>
  <p>I want to show separate error for both and success when form submit successfully.</p>