generator-foo/templates/react/src/app/components/Form.js

Foo project scaffold generator based on generator-jam3

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

const validate = values => {
    const errors = {}
    if (!values.username) {
        errors.username = 'Required'
    } else if (values.username.length > 15) {
        errors.username = 'Must be 15 characters or less'
    }
    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.age) {
        errors.age = 'Required'
    } else if (isNaN(Number(values.age))) {
        errors.age = 'Must be a number'
    } else if (Number(values.age) < 18) {
        errors.age = 'Sorry, you must be at least 18 years old'
    }
    return errors
}

const renderField = field => (
    <div>
        <label>{field.input.placeholder}</label>
        <div>
            <input {...field.input}/> {field.touched && field.error && <span>{field.error}</span>}
        </div>
    </div>
)

const SyncValidationForm = (props) => {
    const {handleSubmit, pristine, reset, submitting} = props
    return (
        <form onSubmit={handleSubmit}>
            <Field name="username" type="text" component={renderField} placeholder="Username"/>
            <Field name="email" type="email" component={renderField} placeholder="Email"/>
            <Field name="age" type="number" component={renderField} placeholder="Age"/>
            <div>
                <button type="submit" disabled={submitting}>Submit</button>
                <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
            </div>
        </form>
    )
}

export default reduxForm({form: 'syncValidation', validate})(SyncValidationForm)