Integrating Firebase with React/

...

/

Sign-Up Form Validation

Sign-Up Form Validation

Let's validate the information from all the fields in our sign-up form.

We'll cover the following...

In the last lesson, we were almost done with the sign-up form of our application.

One piece in the form is missing: validation. Let’s use an isInvalid boolean to enable or disable the submit button.

Press + to interact
...
class SignUpForm extends Component {
  ...
  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
      error,
    } = this.state;
    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === '' ||
      email === '' ||
      username === '';
    return (
      <form onSubmit={this.onSubmit}>
        <input
        ...
        <button disabled={isInvalid} type="submit">
          Sign Up
        </button>
        {error && <p>{error.message}</p>}
      </form>
    );
  }
}
...

Sign-Up Criteria

The user is only allowed to sign up if :

  • both passwords are the same;

  • the username, email and at least one password are filled with a string. ...