RegExp for email validation is not reading string properly (using React, no JSX)

Question

I am trying to get my "submit" button to be enabled or disabled based on the validity of the email that is passed. However, the RegExp expression I am using is not reading the string properly. I've tried testing my isWorking() function with just email.length > 0 to make sure that whatever is being passed to isWorking() is indeed a string, and we are good there but RegExp is always returning false regardless of the input it receives. I'm using React without JSX in this app. Any help at all would be deeply appreciated. Thank you so much!

    const validEmailRegex = RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

    class Signup extends React.Component {

    constructor() {
       super();
       this.state = {
       email: ""
    };
       this.handleSubmit = this.handleSubmit.bind(this);
    }

    isWorking () {
       const email = event.target;
       //if (email.length > 0) {
       //  return false;
       // }
       // return true;

    if (validEmailRegex.test(email) === true) {
       return false;
       }
       return true;
    }

    handleSubmit(event) {
        event.preventDefault();

    if (!event.target.checkValidity()) {
        this.setState({
        invalid: true,
        displayErrors: true, 
    });
    return;
    }

    const form = event.target;
    const data = new FormData(form);

    for (let name of data.keys()) {
        const input = form.elements[name];
        const parserName = input.dataset.parse;
        console.log('parser name is', parserName);

        if (parserName) {
        const parsedValue = inputParsers[parserName](data.get(name));
        data.set(name, parsedValue);
        }
    }

    this.setState({
        res: stringifyFormData(data),
        invalid: false,
        displayErrors: false, 
    });
}

  render() {

     const { res, invalid, displayErrors } = this.state;

     //pass data to the button for disabling or not 
     const isEnabled = this.isWorking();

      return (

      React.createElement("div", { className: "container" },

      React.createElement("div", { className: "row" },

        React.createElement("form", { onSubmit: this.handleSubmit, noValidate: true, className: displayErrors ? 'displayErrors' : '' },
          React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}), 
        ),

        React.createElement("span", { className: "span"},
          React.createElement("fieldset", { className: "form-group" },
            React.createElement(Link, { className: "nav-link", activeClassName: "nav-link-active", to: "/contact" },

              React.createElement("button", { className: "button1", disabled: isEnabled, type: "button"}, "next")
            ),
          )
        ),
    ),
  )
);
}
}

Answer 1

Your isWorking() does not receive event from anywhere. Also, event.target will be an HTML element and definitely not an input value. For a form, you do event.target.elements["<name_of_input>"] (here, name of input if formEmail) to get input value.