How can I disable a button only if specific Input is empty?-CodePudding

I've tried to find a way to disable a button only if specific Inputs fields are still empty. I mean that only few Inputs fields are required for the process, and some are only optional.

The course which I take show us how to disable the button until every input is valid, so I'm not sure what to do.

This is my code, I want the button to be disable only if date is empty.

<form className="place-form" onSubmit={placeSubmitHandler}>
    <Input
    id="date"
    element="input"
    type="date"
    label="Date"
    validators={[VALIDATOR_REQUIRE()]}
    errorText=""
    onInput={inputHandler}
  />

  <Input
    id="description"
    element="textarea"
    label="description"
    validators={[VALIDATOR_MINLENGTH(5)]}
    errorText=""
    onInput={inputHandler}
  />
      

  <Button type="submit" disabled={ formState.isValid  }>
     Sumbit
  </Button>
</form>

CodePudding user response：

You need to put Not sign like ! before formState.isValid

<Button type="submit" disabled={ !formState.isValid  }>
     Sumbit
  </Button>

I have prepared a sample using react-hook-form. you can check this here:

WORKING DEMO