How to control form with error validations with Radio buttons in react-hook-form?

Question

In a React project, I have certain radio buttons and that I have want to supply validation i.e when not selected would throw error. See the code below for reference

const defaultValues = {
  radioValue: ""
};

const radioData = [
  {
    radio: "2:00 PM"
  },
  {
    radio: "3:00 PM"
  },
  {
    radio: "5:00 PM"
  },
  {
    radio: "10:00 AM"
  },
  {
    radio: "9:30 AM"
  }
];


const { handleSubmit, reset, control, register, errors } = useForm({
    defaultValues
  });

const [durationValue, setDurationValue] = useState("1");

<form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
        {radioData.map((data, i) => {
          return (
            <ToggleButton
              className="toggleButtonNew2"
              key={i}
              type="radio"
              active="true"
              variant="light"
              name="radio2"
              value={data.radio}
              checked={durationValue === data.radio}
              onChange={(e) => {
                handleChange(e);
              }}
            >
              {data.radio + " min"}
            </ToggleButton>
          );
        })}
        <br />
        <br />
        <button type="submit">Submit</button>
      </form>

I have tried with this code as shown below:

<Controller 
  control={control}
  render = {({ ref, onChange: handleChange, value }) => (
    <ToggleButton
              className="toggleButtonNew2"
              key={i}
              ref={ref}
              type="radio"
              active="true"
              variant="light"
              name="radioValue"
              value={data.radio}
              checked={durationValue === data.radio}
              onChange={(e) => {
                handleChange(e);
              }}
            >
              {data.radio + " min"}
            </ToggleButton>
  )}
  />

  <small className="form-text text-danger">
           {
             errors.radioValue && <p className="errorMessage">{errors.radioValue.message}</p>
           }
  </small>

But, this one is giving error 'path.split is not a function'. What could be the better solution to enable validation in react-hook-form with radio buttons?

Please refer this link

CodeSandbox link is as: https://codesandbox.io/s/set-countdown-timer-react-js-forked-m6xei

Answer 1

You need to add logic to check if toggle button is clicked or not by using durationValue state initialized with null/undefined value and inside onSubmit method you can check for null/undefined. Added the same code in below snippet.

export default function App() {
  const { handleSubmit, reset, control, register, errors } = useForm({
    defaultValues
  });

  const [durationValue, setDurationValue] = useState(null);
  const [formError, setFormError] = useState(undefined);

  const onSubmit = (e) => {
    if (!durationValue) {
      setFormError({
        message: "not selected any input"
      });
    }
  };
  const handleChange = (e) => {
    const newData = e.target.value;
    console.log("Duration DATA", newData);
    var elems = document.querySelectorAll(".toggleButtonNew2.active");
    [].forEach.call(elems, function (el) {
      el.classList.remove("active");
    });
    e.target.closest("label").classList.toggle("active");
    setDurationValue(newData);
    setFormError(undefined);
  };

  return (
    <>
      <form noValidate autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
        {radioData.map((data, i) => {
          return (
            <ToggleButton
              className="toggleButtonNew2"
              key={i}
              type="radio"
              active="true"
              variant="light"
              name="radio2"
              value={data.radio}
              checked={durationValue === data.radio}
              onChange={(e) => {
                handleChange(e);
              }}
            >
              {data.radio}
            </ToggleButton>
          );
        })}
        <br />
        <br />
        <button type="submit">Submit</button>
      </form>
      <small className="form-text text-danger">
        {formError?.message && (
          <p className="errorMessage">{formError.message}</p>
        )}
      </small>
    </>
  );
}