JAVASCRIPT

react hook form validation

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

react-hook-form file validation

 required: {
          value: true,
          message: "Product image is required.",
        },
      validate: {
        lessThan10MB: (files) => files[0]?.size < 10000000 || "Max 10MB",
        acceptedFormats: (files) =>
          ["image/jpeg", "image/png", "image/gif"].includes(files[0]?.type) ||
          "Only PNG, JPEG e GIF",
      },

react hook form validation controller

              rules={{
                required: {
                  value: required,
                  message: 'This field is required',
                },
                validate: {
                  fileType: (file) =>
                    !required ||
                    validFileTypes.indexOf(file.type) != -1 ||
                    'We only support (pdf, doc, docx, txt, rtf)',
                },
              }}