Regex pattern match validation for form does not work in ant.design

user_1009698 0
Viewed 9126

I have the following input to validate to match a uuid of this form:

51de1069-c0fd-4418-8378-5871c597023b

This is the form that does not seem to trigger validation:

<Form
    name="id"
    onFinish={this.handleJoin}
    size="large"
>
    <Form.Item
        name="channelId"
        rules={[
            {
                required: true,
                type: "regexp",
                pattern: new RegExp("[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}"),
                message: 'Please enter a valid existing channel ID',
            },
        ]}
    >
        <Input min={30} max={40} placeholder="Enter channel ID" autoFocus={true} ref={this.input}/>
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit" block size="large" icon={<LoginOutlined />}>
            Join
        </Button>
    </Form.Item>
</Form>

When I click the join button the validation does not seem to run. Any ideas?

When I do validation such as below, it works, I get a red error message below the input:

{
    required: true,
    message: 'Please enter a valid existing channel ID',
}
antd reactjs regex
1 Answers

You just need to change your pattern declaration and also I think you should split the rules. Change as follows :

   rules={[
            {
                required: true,
                message: 'Channel ID is required',
            },{
                pattern: /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/,
                message: 'Please enter a valid channel ID',
            }
        ]}
user_42870790
Related