How to check valid regex on select

Question

I have the following code

    const SelectSizesDemo = () => {
      const pattern = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
      const errorMsg = "please provide valid email!";

      const [emailArr, setEmailArr] = useState([]);
      const [error, setError] = useState(false);

      return (
        <div>
          <Select
            style={{ width: "90%" }}
            mode="tags"
            onChange={(e) => setEmailArr(e)}
          ></Select>
          {error && errorMsg}
        </div>
      );
    };

I am trying to do the following. The user should input some email, if its email is valid with my pattern then I should add it to my emailArr, if it's not correct then I should show the error message errorMsg, clear from the selected items and not allow the user to add it to the array.

In this code, I successfully can add any string to my array, so I want your help to understand how can I check that string with my pattern.

Please help me to resolve this problem.

Thanks

Answer 1

I've worked on your updated code and figured out what was the problem.

Here is my full code before I start explaining to you what I changed.

Explanations:

• So first, in order to make the select always have the values of the emailArr, you need to bind it to that state with the value attribute. This way, any change in the emailArr state will be applied to the select values too.

  So simply you add: value = {emailArr} in the select.

• Second, in the onChange event you get an array in the e object which is the array of the current values that are in the select field. So in order to test the value, you need to check the validation of the current value that was inserted to that array, which is the last one in it.

  In your code you check the validation of the entire array which cause it to not work correctly:

  Your code:

    onChange={(e) => {
        if (pattern.test(e)) {
          setEmailArr(e);
        } else {
          setError(true);
        }
      }}
  

  Should be:

   onChange={(e) => {
        if (e.length !== 0) {//First check if the array is not empty 
  
          const value = e[e.length - 1]; //get the last(current) value from the array
          if (pattern.test(value)) {
            setEmailArr(e);
            setError(false);
          } else {
            setError(true);
          }
  
        }
      }}
  

  So Here, I first check if the e array is not empty. Because if I check the last value of an empty array it will be undefined - which is false, and this will go to the else block and set the error to true, which is wrong. So that's why I start these checks only if there's something to check in the array.

  Next, I check the current value, if it's valid you update the state (which need to be combined with the select) to the new array with the new value, otherwise - it won't. And by the way, I added setError(false) in case that there was an invalid try before and I want to hide the previous error now.

And a note: The emails you enter in the select must be capitalized in order to match the pattern you chose. If you don't want it then just change it to this pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/g.

Result:

So that's it. I hope everything was clear, and please check the full code.