Form Validation Add form validation with react-hook-forms

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

Form Validation

React Hook Form makes it easy to add reactive form validation.

file_type_js_official pages/admin/slug.js 

  const { register, handleSubmit, reset, watch, formState, errors } = useForm({ defaultValues, mode: 'onChange' });

  const { isValid, isDirty } = formState;

// ...

      <textarea name="content" ref={register({
            maxLength: { value: 20000, message: 'content is too long' },
            minLength: { value: 10, message: 'content is too short' },
            required: { value: true, message: 'content is required'}
          })}>
      </textarea>

        {errors.content && <p className="text-danger">{errors.content.message}</p>}

        <button type="submit" disabled={!isDirty || !isValid}>
          Save Changes
        </button>
👈 Post Editing Form
Image Uploads 👉

Questions?

Ask questions via GitHub below OR chat on Slack #questions