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/