⚛️ Form Validation

Add form validation with react-hook-forms

Form Validation

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

file_type_js 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>

Questions? Let's chat

Open Discord