Get started with react-inputs-validation CDN

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { TextField, ValidatorForm, Textarea } from 'react-inputs-validation';

const ValidationForm = () => {
  const validate = (values) => {
    const errors = {};
    if (!values.name) {
      errors.name = 'Name is required';
    }
    if (!values.email) {
      errors.email = 'Email is required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
      errors.email = 'Invalid email address';
    }
    if (!values.message) {
      errors.message = 'Message is required';
    }
    return errors;
  };

  return (
    <Formik
      initialValues={{ name: '', email: '', message: '' }}
      validate={validate}
      onSubmit={(values, actions) => {
        console.log({ values, actions });
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <ValidatorForm onSubmit={handleSubmit}>
          <Form>
            <Field name="name">
              {({ field, form, meta }) => (
                <TextField
                  label="Name"
                  type="text"
                  {...field}
                  error={meta.error}
                  helperText={meta.error}
                />
              )}
            </Field>
            <ErrorMessage name="name" component="div" />

            <Field name="email">
              {({ field, form, meta }) => (
                <TextField
                  label="Email"
                  type="email"
                  {...field}
                  error={meta.error}
                  helperText={meta.error}
                />
              )}
            </Field>
            <ErrorMessage name="email" component="div" />

            <Field name="message">
              {({ field, form, meta }) => (
                <Textarea
                  label="Message"
                  {...field}
                  error={meta.error}
                  helperText={meta.error}
                />
              )}
            </Field>
            <ErrorMessage name="message" component="div" />

            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        </ValidatorForm>
      )}
    </Formik>
  );
};

export default ValidationForm;