React Form Validation Patterns

react-form-validation-patterns.md

React Form Validation Patterns

Intro

Basic Form Validation

We'll start with basic form validation to get a handle on how the overall pattern works. Below is a basic login form without any validation built in. We're using controlled inputs for the email and password fields.

import React, { Component, PropTypes } from 'react';

class BasicLoginForm extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      email: '',
      password: '',
    };
  }
  
  handleSubmit(e) {
    e.preventDefault();
    // stubbed form submission
    console.log('email', this.state.email);
    console.log('password', this.state.password);
  }
  
  render() {
    return (
      <form onSubmit={e => this.handleSubmit(e)}>
        <label>Email</label>
        <input
          name="email"
          onChange={e => this.setState({ email: e.target.value })}
          type="text"
          value={this.state.email}
        />
        <label>Email</label>
        <input
          name="password"
          onChange={e => this.setState({ password: e.target.value })}
          type="password"
          value={this.state.password}
        />
        <button
          type="submit"   
        >
          Submit
        </button>
      </form>
    );
  }
}

export default BasicLoginForm;

Now let's add some validations. We'll start by adding some state to track errors.