React how to change button back to disabled when input empty

Question

From https://react-hook-form.com/api/useform/formstate I am using the isValid state to check if input matches the rules

 <form> <Controller name="username" control={control} rules={{ minLength: { value: 2, message: 'Tx', }, pattern: { value: /^([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)/, message: 'x', }, }} render={({ field: { ref, ...field } }) => ( <SecondaryInput name="username" errors={errors} innerRef={ref} {...field} /> )} /> <PrimaryButton disabled={!isDirty || !isValid} type="submit" > Test Submit </PrimaryButton> </form>

And it works:

Button is disabled (empty input)
I type
Button not disabled anymore

But when I delete everything (empty input) the button is not disabled. The isValid state remains true

It is probably due to the isDirty state but I don't know how the code works without the isDirty state

Did you use the handleSubmit of react-hook-from in form tag? — Melendez
– Melendez, Commented Aug 16, 2022 at 16:50

Saurav Ghimire · Accepted Answer · 2022-08-16 17:13:38Z

The information that you gave is quite not enough. Make sure that you are using a function to handle changes to your input field using the onChange property. Use the useState function to declare and store the value of the user input and the boolean values isDirty and isValid.

On your function that handles the change to the input field, make sure to check whether the input is valid/dirty or not and update the boolean variables as needed.

Since you declared your variables with useState, react updates the state and your web page should behave the way you want it to.

Collectives™ on Stack Overflow

React how to change button back to disabled when input empty

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related