onSubmit doesn't work even when there aren't errors

[rossanag]

Hello everyone, my first time using this amazing library but it seems I am missing something.
I am using RHF with React js and Yup. I tryed to isolate the problem testing with only one field. The errors are correctly detected and they are shown to the user. But when the only one field is correct, onSubmit isn't working, for somehow I can't figure it isn't triggered.
I was digging in the documentation, the closed issues and googling, but some of the issues don't fit my case or the showed solutions don't solve my problem.
Below are the minimal code tested . Thanks in advance for any suggestion regarding this.

OS: Windows 10
@hookform/resolvers": "^2.8.8",
"react": "^18.0.0",
"react-bootstrap": "^2.3.0",
"react-dom": "^18.0.0",
"react-hook-form": "^7.30.0",
"yup": "^0.32.11"
"@hookform/resolvers": "^2.8.8",

schema.js

import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const validationSchema = yup.object().shape({
  firstName: yup.string().required('First name is required please !').min(2,"Minimum length is 2").max(35, "Maximum length is 50"),

});

const formValidations = { resolver: yupResolver(validationSchema) };

export default formValidations;

EventForm.js

import { useForm} from "react-hook-form";
import  formValidations  from '../helpers/schema';

function EventForm() {

    const initialValues = {
        firstName: ''      
    }

     const {
        register,
        handleSubmit,
        reset,                    
        formState,
        
      } = useForm ({        
        mode: 'onBlur',        
        defaultValues: initialValues,                
        resolver: formValidations.resolver
      });

      const {isDirty, isValid, isSubmitSuccessful} = formState
      console.log("SUBMITTED ", isSubmitSuccessful)

      const onSubmit = (data) => {        
        console.log("PUT!!!!!!!! SAVED!!!!!!!")
        console.log({ data });
        reset(initialValues);
      };      

      console.log("isDirty ", isDirty);
      console.log("isValid ", isValid);
          
  return (  
    
        <div className="container container-resp">
            <div className='App-header'>
                <header><h4>Register an event</h4></header><br/>
                <form className="form-group w-50 p-3 mx-auto bg-dark" onSubmit={ handleSubmit(onSubmit)}>            
                    {/* <FormInputText labelForID="firstName" labelText="First name *" placeholder="First name, please" register={register} required="true"/>                          */}
                        <div className="col-sm-8 col-md-10  col-xs-10 col-centered"> 
                            <label htmlFor="firstName" className="col-form-label">First name</label> 
                            <input type="text" className="form-control form-control input" id="firstName" placeholder= "First name, please" required {...register('firstName')}/>      
                    
                        {(formState.errors.firstName && !formState.isValid) ? <p> {formState.errors.firstName?.message}</p> : null}                          
                    </div> 
                    <FormFooter className='footer-form' footText="* Requiered fields"/>
                </form>
                
            </div>
        </div>

  );
}

export default EventForm;

[Moshyfawn]

I couldn't repro the issue. Please, take a look at this codesandbox and consider to tweak it to better match your use-case.

[rossanag]

Thank you for your reply @Moshyfawn. the cosedsandbox code works either yours or mine. The only difference that is made with TS just JS I tweaked it and put the code here and it works. Here is my codesandbox code . I can't understand why doesn't work in my computer. I checked the library versions and they are the same i am using.

[Moshyfawn]

I'm not sure, TBH. You'll have to find the difference between your implementation and the one here. I'm afraid, I can't know what went wrong in your app :P

[Moshyfawn]

Try checking your submit button, see if it's type="submit", so that it fires the submit event on the form. It's the part I don't see, so, maybe there's an issue in your footer

[rossanag]

It was that, my bad. As soon as I realized it, I came here to post the fix and I saw you already pointed to that. Thanks so much, it is working now.

[Moshyfawn]

Awesome, I'm glad it got resolved!