I'm trying to validate a text field but, I'm getting an error for the below regex expression.

if (!/^[a-zA-Z0-9\\\/\*+;&%?#@!^()_="\-:~`|[\]\{\}\s]*$/i.test(e.target.value)) {
   this.setState({
      newFamilyName: e.target.value,
   });
}

Do I need to add any more characters in the Regex so fulfill it.

I'm trying to validate a text field but, I'm getting an error for the below regex expression.

if (!/^[a-zA-Z0-9\\\/\*+;&%?#@!^()_="\-:~`|[\]\{\}\s]*$/i.test(e.target.value)) {
   this.setState({
      newFamilyName: e.target.value,
   });
}

Do I need to add any more characters in the Regex so fulfill it.

• javascript
• regex
• reactjs

Share Improve this question Follow edited Nov 5, 2019 at 4:08 Mohamed Ibrahim Elsayed 2,98433 gold badges2626 silver badges4646 bronze badges asked Nov 4, 2019 at 22:02 tejasree vangapallitejasree vangapalli 8911 silver badge1111 bronze badges 2

• I mean... if the escape character is "unnecessary", wouldn't that indicate removing characters rather than adding? – Kevin B Commented Nov 4, 2019 at 22:13
• I've edited my answer with a fix. You can mark it as solved if it helped. – Nicolas Hevia Commented Nov 6, 2019 at 5:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You have some unnecesary escape characters: \/ \* \{ \}

You can fix it:

if (!/^[a-zA-Z0-9\\/*+;&%?#@!^()_="\-:~`|[\]{}\s]*$/i.test(e.target.value)) {
   this.setState({
      newFamilyName: e.target.value,
   });
}

Or disable the rule:

//eslint-disable-next-line
if (!/^[a-zA-Z0-9\\\/\*+;&%?#@!^()_="\-:~`|[\]\{\}\s]*$/i.test(e.target.value)) {
   this.setState({
      newFamilyName: e.target.value,
   });
}

Unnecessary escape character means you have a \ in front of a character in your regex that you don't actually need.

I plugged the code you posted into https://eslint/demo and got:

1:20 - Unnecessary escape character: \/. (no-useless-escape)
1:22 - Unnecessary escape character: \*. (no-useless-escape)
1:47 - Unnecessary escape character: \{. (no-useless-escape)
1:49 - Unnecessary escape character: \}. (no-useless-escape)

Which means you didn't need the \ in front of the /, *, {, or } in your regex. Those characters don't need to be escaped since they appeared inside the [] group.

Unfortunately the "Fixed Code" thing on the eslint demo site didn't work, but the following code is how you would fix it

if (!/^[a-zA-Z0-9\\/*+;&%?#@!^()_="\-:~`|[\]{}\s]*$/i.test(e.target.value)) {
   this.setState({
      newFamilyName: e.target.value,
   });
}