React hook form + Modal + data-bs-dismiss

Question

I want to use a tailwind modal, who open & close with data-bs-dismiss argument.

I put on my button : data-bs-dismiss='modal'

But with react hook form, it's doesn't work like i want. If the form contains error or bad input, the data-bs-dismiss was execute and not payed attention to the form errors.

I want close the modal & submit, when the form validation is ok, and contains no other error.

If anyone have a solution.. thank's My code :

const methods = useForm()

return(
    <FormProvider {...methods}>
       <form id={props.id} onSubmit={methods.handleSubmit(onSubmit)}>
        <input id='...'> ... <input/>
        <input id='...'> ... <input/>
        <input id='...'> ... <input/>
         ...
        <li>
            <Button
               btnId={`${props.btnContent}Btn`} 
               btnContent={props.btnContent} 
               btnClass='btn' 
               btnType='submit' 
               btnRipple 
               dismiss={'modal'} 
               form={props.id}
             />
         <li/>
       <form/>
   </FormProvider>
)

Answer 1

Well, what you can do is, Instead of using dismiss you can check in your onSubmit function for any errors. And if the form has any errors then keep the modal open otherwise submit the form and close it.