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

react hook form with yup resolver

Himanshu Jangid answered on April 13, 2022 Popularity 10/10 Helpfulness 4/10

answer react hook form with yup resolver

related select react hook form yup validation

react hook form with yup resolver

Comment

import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';

const useValidationForm = (schema: any) => {
	const { ...props } = useForm({
		mode: 'onChange',
		resolver: yupResolver(schema),
	});

	return {
		...props,
	};
};

export default useValidationForm;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript resolver yup

Link to this answer
Share Copy Link

Contributed on May 24 2022

Himanshu Jangid

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 with yup resolver

Contents

More Related Answers

react hook form with yup resolver

Closely Related Answers

select react hook form yup validation

Grepper

Documentation

Social

Legal

Contact

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