Set Required Conditionally

[hatchli]

I'm just looking to conditionally require input based on the input in other fields. As you can see below, I'm using watch to get a boolean, which I thought I could pass to required. However, that does not work. Is this not a general feature?

  const watchFinance = watch([
    "financingAmount",
    "financingStatus",
    "financingReference",
  ]);

  const financeValidation =
    (watchFinance.financingAmount ||
      watchFinance.financingStatus ||
      watchFinance.financingReference) !== ""
      ? true
      : false;
                  <Input
                    type="number"
                    inputRef={register({
                      required: financeValidation
                    })}
                    placeholder="Amount"
                    name="financingAmount"
                  />
                  <Input
                    type="text"
                    inputRef={register({
                      required: financeValidation,
                    })}
                    placeholder="Status"
                    name="financingStatus"
                  />
                  <Input
                    type="text"
                    inputRef={register({
                      required: financeValidation,
                    })}
                    placeholder="Reference"
                    name="financingReference"
                  />

[bluebill1049]

codesansdbox? or consider using validate function

[hatchli]

Hmm. I didn't mean that, but I suppose that's because 1) I don't understand how I pass a value to validate, and 2) nor how I would then take validates' boolean response and have it change the required prop within register.

[bluebill1049]

<input
  name="test"
  ref={
    register({
      validate: value =>  {
        if (!isRequired) return true; // we good

        if (value) return true; // if value is not empty we good.
      }
    })
  }
/>

[hatchli]

If validate is also doing the same job as required, then that makes a lot more sense! Thank you for sticking with me @bluebill1049 ! I guess required is basically just a subset of validate! Anyways, this is great knowledge to have! Thank you again!

[frequencydesign]

Thank you

[psaromo]

Hi @bluebill1049, 4 years late to this thread. How can I set the error message here to say "This field is required" and clear the error if they input a value?

[hatchli]

Hey @bluebill1049, this has been working beautifully until I tried incorporating non-value date to the validate function e.g., state. Even though the state has been updated, it seems to ignore it entirely when validation is triggered (onSubmit). Is there some way to get validate to reflect the state (as it is) when the user hits submit?

In my case, I only want to require a "file label" input when a file has been uploaded in another input.

  const [newIdentificationOneFile, setNewIdentificationOneFile] = useState(
    false
  );

<Input
                        type="text"
                        inputRef={register({
                          validate: (value) => {
                            if (newIdentificationOneFile && value) {
                              return true;
                            }

                            if (
                              existingIdentificationOneFile &&
                              deleteIdentificationOneFile &&
                              !identificationOneCalled
                            ) {
                              return true;
                            }
                            if (
                              !newIdentificationOneFile
                            ) {
                              console.log(newIdentificationOneFile);
                              return true;
                            }
                            if (value) {
                              return true;
                            } else return false;
                          },
                        })}
                        placeholder="Label"
                        name="identificationOneLabel"
                      />

[bluebill1049]

validate should gets trigger during submit anyhow. can you do some debugging or console log inside your validate statement, see what's going on?