clearErrors is not setting isValid to true

[anjana543]

Hi @bluebill1049,

We've developed a dynamic form that contains multiple select boxes, text, and textarea fields.

When the user changes the value of the end year, an error message should be displayed If the start date is lesser than the end date. For this I'm using controller rules validation function as below,
<Controller
as={}
defaultValue={selectedValue}
options={optionSet}
className={className}
name={name}
isMulti={isMulti}
isClearable={isClearable}
isSearchable={isSearchable}
control={control}
placeholder={label}
isLoading={loading}
rules={{
required: requiredData?.fields?.value?.value || false,
validate: () => dataValidator(),
}}

and in dataValidator function, based on the start and end date, I'm using clearErrors function to remove all validation from start month, start year and end month.

Issue: After using clearErrors(['startMonth', 'startYear', 'endMonth', 'endYear']), the formState.isValid is not set to true.

Please help me to identify the issue.

Using React: 16.15.1

Thanks.

[bluebill1049]

provide a csb

[anjana543]

@bluebill1049 Please check the below csb to reproduce the error,
https://codesandbox.io/s/hungry-monad-iow4z?file=/src/App.js

Steps to reproduce:

1. Change Start month as April and End month as Jan
2. Check the isValid key after changing End month to Sept
3. isValid is not set to true after using clearErrors

Thank you.

[bluebill1049]

@andidev clearErrors doesn't reset isValid, it will only clear the errors object. Your validation will pass before your form becomes valid, if you want to skip validation with certain conditions consider write a validate function with a conditional check for input validation.

[bluebill1049]

[anjana543]

@bluebill1049 How can I validate my other fields? Any way to set isValid to true?
Any alternative solution?
I tried using the watch function but unable to use SetErrors() inside the useeffect of watch function because it resulted in an infinite loop. Please help me here...

[bluebill1049]

@anjana543 please don't ping me multiple times... I understand your frustration and want to get this to work. I am here to help, if i see your question i will try to reply.

potential: include logic in your validate function to skip that validation.

validate: () => {
  if(xxx) return true; // you can use external state to resolve this
  // do the rest of your validation 
}

[anjana543]

Ok @bluebill1049