Input not being read properly in React function (no JSX)

Question

My end goal here is to do some very simple email validation and get my "next" button to disable or enable based on the validity of the email. I was testing my .isWorking() function (controls the boolean that is passed to the disabled attribute of the button) and when I test with email.length > 0, the function appears to work! But when I change it slightly to email.length > 4, the function does not work and just automatically returns "true", disabling the button. Any help at all would be appreciated--I am totally stuck on this and I would be so grateful!

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 (event) {
    //testing function here 
    const email = event.target;
    if (email.length > 4 ) {
        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 boolean to the button for disabling or not 
    const isEnabled = this.isWorking(event);

    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("button", { className: "button1", disabled: isEnabled, type: "button"}, "next")
        ),));}}

Hy , You were calling this.workling method from render with sending any thing as argument , you have sent an event but their is nothing like event their , I suggest you should call this.working method from any of the element , as you want to add this validation to the email, you should call the method on that element as an onChange callback . — theankitkotnala
– theankitkotnala, Commented Feb 21, 2020 at 5:44
Eg . Instead of React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}),), try this : React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email" , onChange:(e)=>this.isWorking(e)}),) — theankitkotnala
– theankitkotnala, Commented Feb 21, 2020 at 5:46

waqas Mumtaz · Accepted Answer · 2020-02-21 05:32:00Z

class Signup extends React.Component {

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

isWorking (event) {
    //testing function here 
    const email = event.target.value;
    console.log(email.length)
    if (email.length > 4 ) {
        this.setState({ isEnabled: false});
    } else {
      this.setState({ isEnabled: 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 boolean to the button for disabling or not 
   // const isEnabled = this.isWorking(event);

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

            React.createElement("form", { onSubmit: this.handleSubmit, onChange:(e)=>this.isWorking(e), 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("button", { className: "button1", disabled: this.state.isEnabled, type: "button"}, "next")
        ),)));}}

You are not getting value of target . See working example: stackblitz.com/edit/react-ayynha

Naveen Attri · Accepted Answer · 2020-02-21 05:50:07Z

class Signup extends React.Component {
  constructor() {
    super();
    this.state = { email: "", isEnabled: true };
    this.isWorking = this.isWorking.bind(this);
  }

  isWorking(event) {
    //testing function here
    console.log("event", event.target.value);
    const email = event.target.value;
    if (email.length > 4) {
      this.setState({ isEnabled: false });
    } else {
      this.setState({ isEnabled: true });
    }
    return true;
  }

  render() {
    const { displayErrors } = this.state;

    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",
              onChange: this.isWorking
            }),
            React.createElement(
              "span",
              { className: "span" },
              React.createElement(
                "button",
                {
                  className: "button1",
                  disabled: this.state.isEnabled,
                  type: "button"
                },
                "next"
              )
            )
          ]
        )
      )
    );
  }

Collectives™ on Stack Overflow

Input not being read properly in React function (no JSX)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related