Registering a custom component, using the regex option

General
1

Hello!
I’m trying to register a custom component. One of my inputs needs a regex validation, that checks if the user has typed one or multiple emails, separated by semicolons. I followed the docs and here is how I’m trying to do that:

Builder.registerComponent(ContactForm, {
  name: 'ContactForm',
  inputs: [
    {
      name: 'emails',
      type: 'text',
      defaultValue: '',
      regex: {
        // eslint-disable-next-line prettier/prettier
        pattern: /^(|([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/.toString(),
        message: 'Emails must be in xx@xx.xx format, separated by semicolon.',
        options: 'g',
      },
    },
});

When I navigate to the visual editor and try to add a valid email, the error message does not disappear. It disappears only if I refresh the page.

While typing:
Screenshot 2024-04-03 at 14.58.47

On blur:
Screenshot 2024-04-03 at 15.02.07

I have also tried to add the regex like this:

{
  pattern: '^(|([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$',
}

and like this as well:

{
  pattern: '/^(|([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/',
}

but then I wasn’t even able to type in the input field.

Here is a link, that shows that the regex is working fine.

What am I doing wrong? Thanks in advance.

2

Hello @mayyamark,

Welcome to the builder.io forum post.

Here is the updated code that seems to work for us

Builder.registerComponent(ContactForm, {
 name: 'ContactForm',
 inputs: [
   {
     name: 'emails',
     type: 'text',
     defaultValue: '',

     regex: {
       // eslint-disable-next-line prettier/prettier
       pattern:
       "^(|([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5}){1,25})+)*$",
       message: 'Emails must be in xx@xx.xx format, separated by semicolon.',
       options: 'g',
     },
   },
 ],
})
1 Like