CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-hook-form
user944513
user944513

Reputation: 12729

why required check is not working in date picker?

when I click submit button .it is not showing Required error as it is required field.here is my code.I already registered with required and also tried to use rule but still not getting required validation

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Controller
        as={
            <KeyboardDatePicker
                autoOk
                disableToolbar
                variant="inline"
                format="MM/dd/yyyy"
                id={"appointmentDate"}
                inputVariant="outlined"
                inputRef={register({ required: true })}
                label={"Appointment Date"}
                required={true}
                helperText={errors["appointmentDate"] && "Required..!!"}
                error={errors["appointmentDate"] ? true : false}
                KeyboardButtonProps={{
                    "aria-label": "change date"
                }}
            />
        }
        rules={{ validate: value => value === null || "Required ..!!" }}
        name={"appointmentDate"}
        control={control}
    />
</MuiPickersUtilsProvider>

https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-1p3x5

Upvotes: 0

Views: 621

Answers (1)

syjsdev
syjsdev

Reputation: 1336

Here is fixed code

        <Controller
          as={
            <KeyboardDatePicker
              autoOk
              disableToolbar
              variant="inline"
              format="MM/dd/yyyy"
              id={"appointmentDate"}
              //  inputRef={register({ required: true })}  // not required remove this
              inputVariant="outlined"
              label={"Appointment Date"}
              required={true}
              helperText={errors["appointmentDate"] && "Required..!!"}
              error={errors["appointmentDate"] ? true : false}
              KeyboardButtonProps={{
                "aria-label": "change date"
              }}
            />
          }
          // rules={{ validate: value => value === null || "Required ..!!" }} // change this like below
          rules={{ required: true }}
          name="appointmentDate"
          control={control}
        />

https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-iymgr

Upvotes: 1

Related Questions