Use Regular expression in JSX file in (React + Material-ui)

Question

I am trying to use RegEx to do material-ui form based validation. I am using my JS based Regex, but it does not work. Why ?

Below is the snippet from my template.jsx file. my-form is just a wrapper on the formsy material-ui component.

import {myForm, TextField} from '@react-component/my-form';

export default (props) => {
 } = props;
   const emailRegex = new RegExp('/\S+@\S+\.\S+/');
    const phoneRegEx = new RegExp('/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-/\s\.]{0,1}[0-9]{4}$/');
    return (
<myForm>
  <TextField id="smsNumber" value={userInfo.smsNumber} name="smsNumberName" required requiredError="Mobile is a required field." validations={{matchRegexp:phoneRegEx}} validationErrors={{matchRegexp:'Enter a valid mobile.'}} onChange={changeSmsNumber} floatingLabelText={t('userProfile.mobile', "Mobile")} floatingLabelFixed={true} hintText={t('userProfile.mobile', "Mobile")}/>
</myForm>
   );
};

This code always gives 'Enter a valid Mobile' error message.

Wiktor Stribiżew · Accepted Answer · 2016-11-30 17:44:25Z

11

You need to use a regex literal notation and anchor the email regex:

 const emailRegex = /^\S+@\S+\.\S+$/;
                    ^^            ^^

And this is a phoneRegEx fix:

const phoneRegEx = /^[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-/\s.]?[0-9]{4}$/;

Note that {0,1} limiting quantifier is the same as ? (1 or 0 occurrences). There is no need escaping a dot inside [...] character class, it already matches a literal dot there.

answered Nov 30, 2016 at 17:44

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Viswa Teja Kuncham Over a year ago

Can you help me how to place variable in regex in react, ex: var re1 = new RegExp("^--" + boundary + "$", "gm");

Wiktor Stribiżew Over a year ago

@ViswaTejaKuncham Not sure what problem you have, but it should be at least var re1 = new RegExp("^--" + boundary.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "$");. Not sure what flags you use though.

Collectives™ on Stack Overflow

Use Regular expression in JSX file in (React + Material-ui)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related