Conditional validation with react hook form

This whole validation behavior (UX) is definitely making things a bit harder, however, there are a couple of things that you should leverage from the library such as:

• watch
• validate
• getValues

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const {
    register,
    handleSubmit,
    errors,
    formState: { isValid, touched },
    getValues,
    trigger,
    watch
  } = useForm({
    mode: "onBlur"
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
  const validate = (value) => {
    if (getValues("name")) { // read the checkbox value
      return !!value;
    }

    return true;
  };
  const isChecked = watch("name"); // watch if the name is checked

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="id">ID</label>
      <input
        name="id"
        placeholder="id"
        ref={register({ required: true, maxLength: 50 })}
      />
      {errors.id && <p>"ID is required"</p>}

      <fieldset disabled={!isChecked}>
        <legend>
          <input
            type="checkbox"
            name={"name"}
            ref={register}
            onChange={() => trigger()} // you want update isValid due to state change, and also those extra two inputs become required
          />
          <span>Check</span>
        </legend>
        <label htmlFor="firstName">First Name</label>
        <input
          name="firstName"
          placeholder="Bill"
          ref={register({
            validate
          })}
        />
        // make sure input is touched before fire an error message to the user
        {errors.firstName && touched["firstName"] && (
          <p>"First name is required"</p>
        )}
        <label htmlFor="lastName">Last Name</label>
        <input
          name="lastName"
          placeholder="Luo"
          ref={register({
            validate
          })}
        />
        {errors.lastName && touched["lastName"] && (
          <p>"Last name is required"</p>
        )}
      </fieldset>

      <input type="submit" disabled={!isValid} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSB: https://codesandbox.io/s/react-hook-form-conditional-fields-forked-n0jig?file=/src/index.js:0-1831

on your ref, dont use hard coded bool true, ref={register({ required: true})}, but your dynamic ref={register({ required: disabled })}

do notice that because your mode: "onBlur" config, the button won't be abled until id field blurred

You just need to replace true .from ref: required:true..... Instead use const 'disabled' ....in input of first and last name .

So as to achieve dynamic change

Same problem. That's what I came up with. https://stackblitz.com/edit/react-ts-b557bc?file=App.tsx

import * as React from 'react';
import './style.css';
import { useForm, useWatch, Controller } from 'react-hook-form';

export default function App() {
  const {
    register,
    handleSubmit,
    control,
    unregister,
    formState: { errors },
  } = useForm({
    defaultValues: {
      isOnline: true,
      isRegular: false,
      urlAddress: '',
      cityAddress: '',
      startDate: '',
    },
  });

  const [isOnline, isRegular] = useWatch({
    control,
    name: ['isOnline', 'isRegular'],
  });

  const onSubmit = (data) => console.log('data: ', data);
  console.log('errors: ', errors);

  React.useEffect(() => {
    if (isOnline) {
      register('urlAddress');
      unregister('cityAddress');
    } else {
      register('cityAddress');
      unregister('urlAddress');
    }
  }, [register, unregister, isOnline]);

  React.useEffect(() => {
    if (isRegular) {
      register('startDate');
    } else {
      unregister('startDate');
    }
  }, [register, unregister, isRegular]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="isOnline"
        render={({ field: { onChange, value } }) => (
          <input
            type="checkbox"
            checked={value}
            value={value}
            onChange={onChange}
          />
        )}
      />

      {isOnline ? (
        <Controller
          control={control}
          name="urlAddress"
          rules={{ required: { value: true, message: 'urlAddress required' } }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <div>
              <div>urlAddress</div>
              <input type="text" value={value} onChange={onChange} />
              error: {error?.message}
            </div>
          )}
        />
      ) : (
        <Controller
          control={control}
          name="cityAddress"
          rules={{ required: { value: true, message: 'cityAddress required' } }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <div>
              <div>cityAddress</div>
              <input type="text" value={value} onChange={onChange} />
              error: {error?.message}
            </div>
          )}
        />
      )}

      <Controller
        control={control}
        name="isRegular"
        render={({ field: { onChange, value } }) => (
          <input type="checkbox" value={value} onChange={onChange} />
        )}
      />

      {isRegular && (
        <Controller
          control={control}
          name="startDate"
          rules={{ required: { value: true, message: 'startDate required' } }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <div>
              <div>startDate</div>
              <input type="text" value={value} onChange={onChange} />
              error: {error?.message}
            </div>
          )}
        />
      )}

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