Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement