Yup validation on Select field (dropdown) react-hook-form not working

Question

iam new in ReactJs, so iam working with react-hook-form and Yup schema validation, and i need to validate my "Select field", and i need to do something when my "Select field" onChange. But the schema validation is not working. For example: when the submit button cliked and the value on "Select field" is null/empty the error message is appear, but when the select field value change to not null/ not empty value, the error message is not disapear, and error message still exit. My goal is when the value "Select field" is not null the error message is disapear. Anyone know how to fix this? Thanks in advance and sorry for my broken english. Below is my code and link in codesandbox. Codesandbox

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,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(SignupSchema)
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Select</label>
        <select
          {...register("select")}
          onChange={(e) => doSomething(e.target.value)}
        >
          <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);

In the <select>, you are overwriting the onChange prop that register() provides. — Calvin

Vijayaraghavan Sundararaman Vijayaraghavan Sundararaman · Accepted Answer · 2021-06-19T13:28:09

You can trigger a manual validation using trigger or you can set the value and trigger validation

Set Value And Trigger Validation

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

Manual Validation

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,
    trigger,
    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
    await trigger(['select']) // Trigger validation on select
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Select</label>
        <select
          {...register("select")}
          onChange={(e) => doSomething(e.target.value)}
        >
          <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);

Yup validation on Select field (dropdown) react-hook-form not working

1 Answers