TextInput validation not triggering during typing(onChange).

[david-hov]

I tried all modes and revalidate values

What you were expecting: e.g. Validate first name, when inserted dash immediatly show error message.

What happened instead: only when onBlur, even when I put onChange mode or all, it only triggers when onBlur, but need real time validation to show missing or wrong elements to user.

Steps to reproduce:

Related code:

<SimpleForm
      onSubmit={handleSubmit}
      className='sign-up-form'
      validate={(values) =>
          validateSignUpFirstStep(values,
              timerId,
              setEmailChecked,
              setInputDisabled,
              email,
              setTimerId)
      }
      mode='all'
      reValidateMode='onChange'
      style={{ padding: '0' }}
      toolbar={<CustomToolbar />}
>
          <div className='names-fields'>
              <TextInput className='first-name' variant='outlined' validate={required()} fullWidth source='firstName' label='First Name' />
              <TextInput variant='outlined' validate={required()} fullWidth source='lastName' label='Last Name' />
        </div>
</SimpleForm>

Other information: https://codesandbox.io/p/devbox/validationtest-djclwn

Go to Posts and create, need to trigger during typing validation but only trigger when onblur

Environment

• React-admin version: 4.0.0
• Last version that did not exhibit the issue (if applicable):
• React version: 18.1.0
• Browser: Chrome
• Stack trace (in case of a JS error):

[david-hov]

But when blur and again focus it's starting working. Now for temporary solution for me was to set on every TextInput onChange={(e: any) => { e.target.blur(); e.target.focus(); } to show error runtime. but mode='onChange' or mode='all' should handle that.

[david-hov]

As I can not see any answeres, I created seperate function which I call like this <TextInput onInput={validateOnType} source='email' validate={[required('This field is required'), validateInput]}/> ---and validateOnType function like this---

export const validateOnType = (e: any) => {
    // react-hook-form issue, temporary workaround
    if (e.target.value.length === 1) {
        e.target.blur();
        e.target.focus();
    }
}

which only triggered when first letter/symbol/number... entered.

[fzaninotto]

Confirmed, thanks for the report.

[djhi]

Isn't it because you have both form level and input level validation? react-hook-form does not support both on the same form, as explained in our documentation (https://marmelab.com/react-admin/Validation.html):

https://marmelab.com/react-admin/Validation.html

[david-hov]

Isn't it because you have both form level and input level validation? react-hook-form does not support both on the same form, as explained in our documentation (https://marmelab.com/react-admin/Validation.html):

https://marmelab.com/react-admin/Validation.html

no as you can see I am usin only global validation , you can see in sandbox as documentation says {/* We need to add validate={required()} on required fields to append a '*' symbol to the label, but the real validation still happens in validateUserCreation */}

[djhi]

This is fixed in v5 thanks to #9781. To solve it in v4, you'll have to override your inputs helperText.