CODEWITHSUNDEEP
reactjsyup
user8758206
user8758206

Reputation: 2191

Simple react form validation with yup

I'm trying to learn form validation with yup and react-hook-form and, ideally want to set the validation to also require at least one of the two different-named radio options, but first understand why the isValid variable is false.

Here's my code:

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

const App = () => {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = async data => {
    console.log('form data', data);
    const isValid = await schema.isValid();
    console.log('isValid', isValid);
  }

  return (
    <>
    {console.log('errors', errors)}
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="name" defaultValue="test" ref={register} />
      
      <input name="nameTwo" ref={register({ required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}

      <label>
        <input
          name="test"
          type="radio"
          ref={register}
          value="test"
        />
    </label>

    <label>
        <input
          name="testTwo"
          type="radio"
          ref={register}
          value="testTwo"
        />
    </label>
      
      <input type="submit" />
    </form>
    </>
  );
}

const schema = yup.object().shape({
  name: yup.string(),
  nameTwo: yup.string().required(),
  test: yup.string(),
  testTwo: yup.string()
})

export default App

So the schema defines only one field (nameTwo) as required, but even when filling in that field it still is false. Why is isValid not true? And how is it best to go about making either one of the two radio buttons (test or testTwo) required?

Stackblitz demo: https://stackblitz.com/edit/react-93vahd

Thank you

Upvotes: 0

Views: 2062

Answers (1)

j-petty
j-petty

Reputation: 3026

The isValid property is available in the formState object returned from the useForm hook.

You'll notice that onSubmit is not called unless the Yup validation passes. Therefore isValid will always be true when checking inside the onSubmit callback.

import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const App = () => {
  const {
    register,
    handleSubmit,
    errors,
    formState: { isValid }
  } = useForm();
  const onSubmit = async data => {
    console.log('form data', data);
  };

  return (
    <>
      {console.log('isValid', isValid)}
      {console.log('errors', errors)}
      <form onSubmit={handleSubmit(onSubmit)}>
        <input name="name" defaultValue="test" ref={register} />

        <input name="nameTwo" ref={register({ required: true })} />
        {errors.exampleRequired && <span>This field is required</span>}

        <label>
          <input name="test" type="radio" ref={register} value="test" />
        </label>

        <label>
          <input name="testTwo" type="radio" ref={register} value="testTwo" />
        </label>

        <input type="submit" />
      </form>
    </>
  );
};

const schema = yup.object().shape({
  name: yup.string(),
  nameTwo: yup.string().required(),
  test: yup.string(),
  testTwo: yup.string()
});

export default App;

Upvotes: 1

Related Questions