How can I implement input validation in a React application?

How can I implement input validation in a React application?

You can use controlled components along with state to manage input values and validate them on change.

What libraries can help with input validation?

Libraries like Formik and Yup are popular for handling forms and validation in React.

Can you show me a simple example using Formik?

Sure! Here's a basic example:

import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ email: '' }}
      validate={values => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (!/\S+@\S+\.\S+/.test(values.email)) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

What about custom validation logic?

You can define your own validation function and pass it to Formik's validate prop, allowing for custom rules.