register.jsx

import React, { PropTypes } from 'react';
import { reduxForm } from 'redux-form';

// Fields
const fields = ['username', 'email', 'emailAgain', 'password', 'passwordAgain'];

// Validation Function
const validate = values => {

  // Errors object is empty at first.
  const errors = {};

  // Username
  if (!values.username) {
    errors.username = "Required";
  } else if (values.username.length < 3 || values.username.length > 15) {
    errors.username = "Must be between 3 and 15 characters in length"
  }

  // E-mail (and Again)
  if (!values.email) {
    errors.email = "Required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = "Invalid email address"
  }

  if (!values.emailAgain) {
    errors.emailAgain = "Required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.emailAgain)) {
    errors.emailAgain = "Invalid email address"
  }

  if (!(values.email == values.emailAgain)) {
    errors.email = "Email fields must match"
  }

  // Password
  if (!values.password) {
    errors.password = "Required";
  } else if (values.password.length < 8) {
    errors.password = "Must be at least 8 characters in length"
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(values.password)) {
    errors.password = "Must contain one uppercase letter, one lowercase letter, and one number."
  }

  if (!values.passwordAgain) {
    errors.passwordAgain = "Required";
  } else if (values.passwordAgain.length < 8) {
    errors.passwordAgain = "Must be at least 8 characters in length"
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(values.passwordAgain)) {
    errors.passwordAgain = "Must contain one uppercase letter, one lowercase letter, and one number."
  }

  if (values.password != values.passwordAgain) {
    errors.password = "Password fields must match"
  }

  console.log(errors);
  return errors;

}

let fieldStyle = field => {
  if (field.touched && field.error) {
    return "field error"
  } else {
    return "field"
  }
}

let dispErrors = field => {
  if (field.touched && field.error) {
    return (<div className="ui basic red pointing prompt label transition visible">{field.error}</div>)
  }
}

let RegisterForm = React.createClass({

  propTypes: {
    handleSubmit: PropTypes.func.isRequired
  },

  render() {

    const { fields: { username, email, emailAgain, password, passwordAgain }, handleSubmit } = this.props;

    return (
      <div className="row">
        <div className="col-sm-6 col-sm-offset-3">
          <div className="auth-box">
            <div className="ui raised segment">
              <form className="ui form">
                <div className={fieldStyle(username)}>
                  <label>Username</label>
                  <input type="text" {...username} />
                  {dispErrors(username)}
                </div>
                <div className={fieldStyle(email)}>
                  <label>E-mail</label>
                  <input type="text" {...email} />
                  {dispErrors(email)}
                </div>
                <div className={fieldStyle(emailAgain)}>
                  <label>E-mail (Again)</label>
                  <input type="text" {...emailAgain} />
                  {dispErrors(emailAgain)}
                </div>
                <div className={fieldStyle(password)}>
                  <label>Password</label>
                  <input type="password" {...password} />
                  {dispErrors(password)}
                </div>
                <div className={fieldStyle(passwordAgain)}>
                  <label>Password (Again)</label>
                  <input type="password" {...passwordAgain} />
                  {dispErrors(passwordAgain)}
                </div>
                <button className="ui button" type="submit" onClick={handleSubmit}>
                  Register Account
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );

  }

});

RegisterForm = reduxForm({
  form: 'register',
  fields: fields,
  validate,
  onSubmit: (values) => {
    console.log(values);
  }
})(RegisterForm);

export default RegisterForm;