regex pattern not working

[santhoshkarthi002]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

  <TextFieldElement
        required
        margin="dense"
        name="Interval"
        fullWidth
        label="Duration"
        type="number"
        inputProps={{
          min: 1,
        }}
        validation={{
          pattern: {
            value: /^(0|[1-9]\d*)$/,
            message: 'Duration should have minimum of 1',
          },
        }}
      />

how can i put regex pattern to textfield element for validation

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

[sadik-malik]

@santhoshkarthi002: The validation object is being passed to react-hook-form, but it is not triggering the error. This behavior persists even when using native HTML input.

Try using validate instead of pattern in validation prop.

validation={{
    validate: (value) => {
      if (!/^(0|[1-9]\d*)$/.test(value)) {
        return 'Duration should have minimum of 1';
      }
    },
  }}

[santhoshkarthi002]

it,s working, Thank you.

[waza-ari]

Just for anyone finding this, with v7 the solution above is no longer valid. Check the v7 beta announcement (#252 ) for details. Essentially it must now be rules:

<TextFieldElement
  ...
  rules={{
    validate: (value) => {
      if (!/^$|^\d+[.,]?\d{0,2}$/g.test(value)) {
        return 'Please enter a valid number..';
      }
    }
  }}
/>