Charts and Console(5)Validation Form

Charts and Console(5)Validation Form

Follow the document, it is pretty straightforward.

ValidateForm.js some other validations can be added here as well.
export const required = value => value ? undefined : 'Required';

export const maxLength = max => value =>
    value && value.length > max ? `Must be ${max} characters or less` : undefined;

export const minLength = min => value =>
    value && value.length < min ? `Must be ${min} charactors or more` : undefined;

export const number = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined;

export const minValue = min => value =>
    value && value < min ? `Must be at least ${min}` : undefined;

export const maxValue = max => value =>
    value && max < value ? `Must be less than ${max}` : undefined;

export const email = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
        'Invalid email address' : undefined;

Import the validations to the form
import {required, minLength, minValue} from '../common/ValidationForm';

Add that to the Field
<Field
    type="text"
    name="company"
    label="Company"
    placeholder="Company Name for Search(eg. walmart)"
    validate={[ required, minLength(3) ]}
    component={FieldInput}
/>

<Field
    type="text"
    name="interval"
    label="Interval"
    placeholder="Interval for Search unit minutes (eg. 70)"
    validate={[ required, minValue(70) ]}
    component={FieldInput}
/>

References:
https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs
https://redux-form.com/6.6.1/examples/fieldlevelvalidation/