1

I am trying to validate my registration form but I'm getting this error and I can't solve it. my form submit button goes to handleRegistration which should validate the form first then submit. I was trying to follow the example in this link https://www.itsolutionstuff.com/post/password-and-confirm-password-validation-in-reactexample.html

handleRegistration(event) {
  event.preventDefault();
  if (this.validate()) {
    this.toggleModal();
    console.log(this.state);
    let input = {};
    input["name"] = "";
    input["email"] = "";
    input["password"] = "";
    input["confirmPassword"] = "";
    input["age"] = "";
    input["gender"] = "";
    this.setState({
      input: input
    });
    console.log(this.state)
    alert('Demo Form is submited');
  }
}

validate() {
  let input = this.state.input;
  let errors = {};
  let isValid = true;

  if (!input["fullname"]) {
    isValid = false;
    errors["fullname"] = "Please enter your name.";
  }

  if (!input["email"]) {
    isValid = false;
    errors["email"] = "Please enter your email Address.";
  }

  if (typeof input["email"] !== "undefined") {

    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    if (!pattern.test(input["email"])) {
      isValid = false;
      errors["email"] = "Please enter valid email address.";
    }
  }

  if (!input["password"]) {
    isValid = false;
    errors["password"] = "Please enter your password.";
  }

  if (!input["confirmPassword"]) {
    isValid = false;
    errors["confirmPassword"] = "Please confirm your password.";
  }

  if (!input["age"]) {
    isValid = false;
    errors["age"] = "Please Enter your age.";
  }

  if (typeof input["password"] !== "undefined" && typeof input["confirmPassword"] !== "undefined") {

    if (input["password"] != input["confirmPassword"]) {
      isValid = false;
      errors["password"] = "Passwords don't match.";
    }
  }

  this.setState({
    errors: errors
  });

  return isValid;
}

handleChange(event) {
  let input = this.state.input;
  input[event.target.name] = event.target.value;

  this.setState({
    input
  });
}

I am initalizing my input and errors objects in my state here

this.state = {
  isNavOpen: false,
  isModalOpen: false,
  isRegistrationModalOpen: false,
  input: {},
  errors: {}
}

and my registration form is structured like that

<Form onSubmit={this.handleRegistration}>
  <FormGroup>
    <Input type="text" id="fullname" name="fullname" placeholder="Full Name" value={this.state.input.name} onChange={this.handleChange}></Input>
    <div className="text-danger">{this.state.errors.name}</div>
  </FormGroup>
  ....
</Form>

Thank you

1 Answer 1

2

The problem

<Form onSubmit={this.handleRegistration}>

this.handleRegistration wasn't bound to the class (component) therefor this doesn't refer to the class instance.

The solution

Declare the method as arrow function. This way it will be the instance method but not on the prototype so this will refer to the instance.

handleRegistration(event) {

to

handleRegistration = (event) => { 

More info: https://reactjs.org/docs/faq-functions.html#class-properties-stage-3-proposal.

1
  • Thank you. I can't believe I forgot binding it. Thanks Nov 1, 2020 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.