How do I implement form validation in frontend frameworks?

How do I implement form validation in frontend frameworks?

To implement form validation in frontend frameworks, you can use built-in validation libraries or create custom validation functions. Which framework are you using?

I'm using React. What are some best practices?

In React, you can use libraries like Formik or React Hook Form for easier validation management. It's also good to keep validation logic separate from your UI components.

Can you give me an example of using Formik for validation?

Sure! With Formik, you can define a validation schema using Yup. Here's a simple example:

import { Formik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
});

<Formik
  initialValues={{ email: '' }}
  validationSchema={validationSchema}
  onSubmit={values => { console.log(values); }}
>
  {({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="email" />
      <ErrorMessage name="email" />
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

What if I want to validate multiple fields?

You can extend the Yup schema to include multiple fields. Just add more fields to the object. For example:

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});