Simple react form validation with yup - reactjs

Question

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

Answer 1

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;