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

select react hook form yup validation

Add Answer

shashanka a answered on April 13, 2022 Popularity 10/10 Helpfulness 4/10

answer select react hook form yup validation

related react hook form with yup resolver

related react hook form validation controller

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 react-hook-form select validation yup

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

shashanka a

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on May 24 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

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 c

Link to this answer
Share Copy Link

Contributed on Apr 13 2022

Grotesque Gerbil

0 Answers Avg Quality 2/10

select react hook form yup validation

Contents

More Related Answers

select react hook form yup validation

Closely Related Answers

react hook form with yup resolver

react hook form validation controller

Grepper

Documentation

Social

Legal

Contact

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