Breaking News: Grepper is joining You.com. Read the official announcement!

react hook form validation controller

Add Answer

Grotesque Gerbil answered on April 13, 2022 Popularity 10/10 Helpfulness 2/10

answer react hook form validation controller

related select react hook form yup validation

related react hook form validation

react hook form validation controller

Comment

              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)',
                },
              }}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: controller javascript react-hook-form validation

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Grotesque Gerbil

0 Answers Avg Quality 2/10

Closely Related Answers

select react hook form yup validation

Comment

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import "./styles.css";

const SignupSchema = yup.object().shape({
  select: yup.string().required()
});

function App() {
  const {
    register,
    setValue,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(SignupSchema)
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  const doSomething = async (value) => {
    // do something with my select value onChange
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Select</label>
        <select
          {...register("select")}
          onChange={(e) => setValue('select', e.target.value, { shouldValidate: true })} // Using setValue
        >
          <option value="">Null</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
        {errors.select && <p>{errors.select.message}</p>}
      </div>
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

shashanka a

0 Answers Avg Quality 2/10

react hook form validation

Comment

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>
  );
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: react-hook-form.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 10 2022

Isijola Ademie

0 Answers Avg Quality 2/10

react hook form validation controller

Contents

More Related Answers

react hook form validation controller

Closely Related Answers

select react hook form yup validation

react hook form validation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.