1import React from 'react'
2import { Field, reduxForm } from 'redux-form'
3
4const required = value => (value || typeof value === 'number' ? undefined : 'Required')
5const maxLength = max => value =>
6  value && value.length > max ? `Must be ${max} characters or less` : undefined
7const maxLength15 = maxLength(15)
8export const minLength = min => value =>
9  value && value.length < min ? `Must be ${min} characters or more` : undefined
10export const minLength2 = minLength(2)
11const number = value =>
12  value && isNaN(Number(value)) ? 'Must be a number' : undefined
13const minValue = min => value =>
14  value && value < min ? `Must be at least ${min}` : undefined
15const minValue13 = minValue(13)
16
17const FieldLevelValidationForm = props => {
18  const { handleSubmit, pristine, reset, submitting } = props
19  return (
20    <form onSubmit={handleSubmit}>
21      <Field
22        name="username"
23        type="text"
24        component={renderField}
25        label="Username"
26        validate={[required, maxLength15, minLength2]}
27        warn={alphaNumeric}
28      />
29      <div>
30        <button type="submit" disabled={submitting}>
31          Submit
32        </button>
33        <button type="button" disabled={pristine || submitting} onClick={reset}>
34          Clear Values
35        </button>
36      </div>
37    </form>
38  )
39}
40
41export default reduxForm({
42  form: 'fieldLevelValidation' // a unique identifier for this form
43})(FieldLevelValidationForm)
44