Antd validation by pattern do not trigger error

Question

So I read this : Regular expression works on regex101.com, but not on prod

I create the following rule in antd : Demo

    <Form.Item
      validateStatus={usernameError ? "error" : ""}
      help={usernameError || ""}
    >
      {getFieldDecorator("username", {
        rules: [
          { required: true, message: "Please input your username!" },
          {
            type: "regexp",
            pattern: new RegExp(
              /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!#$%\-_=+<>])([a-zA-Z0-9!#$%\-_=+<>]+)$/
            ),
            message: `Password Pattern`
          }
        ]
      })(
        <Input
          prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
          placeholder="Username"
        />
      )}
    </Form.Item>

The regex should match anything that MUST include at least 1 number, 1 letter and 1 special character.

As you can see from the log, the regex work correctly in JS, but in antd, the pattern is not working.

Also, I followed this and I correctly added the type="regexp"

What is still missing ?

"Also, I followed this and I correctly added the type="regexp" " - it needs to be removed not added. You can check out the attached code sandbox there :) — blueseal, Feb 09 '20 at 11:23

score 8 · Accepted Answer · answered Feb 09 '20 at 11:13

You don't have to explicitly mention type: "regexp".

Do something like this, It will work.

rules: [
 { required: true, message: "Please input your username!" },
 {
    pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!#$%\-_=+<>])([a-zA-Z0-9!#$%\-_=+<>]+)$/,
    message: `Password Pattern`
 }
]

Check out a similar answer related to regex.

Antd validation by pattern do not trigger error

1 Answers1