Using Yup and Formik to Implement Inline Character Limit Validation in React Forms

Implementing Inline Validation in a React Form Using Formik, Yup, and TypeScript

Solution 1: React Frontend Form with Yup Validation on Character Limit

import React from 'react';
import { Field, Formik, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import TextField from '@material-ui/core/TextField';
// Define the validation schema with Yup, setting max length
const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();
// Function component
const DescriptionForm = () => {
  return (
    <Formik
      initialValues={{ description: '' }}
      validationSchema={Yup.object({ description: descriptionValidation })}
      onSubmit={(values) => console.log('Submitted', values)}
    >
      {({ errors, touched, setFieldValue, setFieldTouched }) => (
        <Form>
          <Field
            as={TextField}
            name="description"
            label="Description"
            multiline
            rows={4}
            placeholder="Optional"
            error={Boolean(errors.description && touched.description)}
            helperText={
              errors.description && touched.description
                ? errors.description
                : 'Limit: 250 characters'
            }
            onChange={(event) => {
              const { value } = event.target;
              setFieldValue('description', value);
              if (value.length > 250) {
                setFieldTouched('description', true);
              }
            }}
          />
          <ErrorMessage name="description" component="div" className="error" />
        </Form>
      )}
    </Formik>
  );
};
export default DescriptionForm;

Alternative Inline Validation Without the maxLength Property

Solution 2: React with Manual Character Length Validation Without Blocking Input

import React from 'react';
import { Field, Formik, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import TextField from '@material-ui/core/TextField';
// Yup schema for 250-character limit
const descriptionValidation = Yup.string()
  .max(250, 'Description cannot exceed 250 characters')
  .optional();
// Component definition
const DescriptionForm = () => {
  return (
    <Formik
      initialValues={{ description: '' }}
      validationSchema={Yup.object({ description: descriptionValidation })}
      onSubmit={(values) => console.log('Form Submitted:', values)}
    >
      {({ errors, touched, setFieldValue, setFieldTouched, values }) => (
        <Form>
          <TextField
            name="description"
            label="Description"
            multiline
            rows={4}
            placeholder="Optional"
            value={values.description}
            error={Boolean(errors.description && touched.description)}
            helperText={
              errors.description && touched.description
                ? errors.description
                : `Characters left: ${250 - values.description.length}`
            }
            onChange={(event) => {
              const { value } = event.target;
              if (value.length <= 250) {
                setFieldValue('description', value);
              } else {
                setFieldTouched('description', true);
              }
            }}
          />
          <ErrorMessage name="description" component="div" className="error" />
        </Form>
      )}
    </Formik>
  );
};
export default DescriptionForm;

Backend Validation Using Express.js and Yup for Character Limit

Solution 3: Backend Validation Using Node.js with Express and Yup

const express = require('express');
const app = express();
const Yup = require('yup');
// Middleware for JSON parsing
app.use(express.json());
// Define Yup schema
const descriptionSchema = Yup.object().shape({
  description: Yup.string()
    .max(250, 'Description cannot exceed 250 characters')
    .optional(),
});
// POST route with validation
app.post('/submit', async (req, res) => {
  try {
    await descriptionSchema.validate(req.body);
    res.status(200).json({ message: 'Validation Passed' });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});
// Server setup
app.listen(3000, () => console.log('Server running on port 3000'));

Frequently Asked Questions About Inline Validation in Formik and Yup

1. What is the main purpose of using Formik with Yup for validation?
2. The combination of Formik and Yup simplifies form handling and validation in React applications, especially for larger forms or forms with complex validation needs. Formik manages form state, while Yup handles validation schemas.
3. How does setFieldTouched differ from setFieldValue in Formik?
4. setFieldTouched updates the “touched” status of a field, marking it as interacted with for validation purposes, while setFieldValue directly updates the value of the field. Together, they help manage when and how validation occurs.
5. Can I use both native maxLength and Yup validation?
6. Using maxLength limits input length on the front end but may prevent Yup’s validation from triggering for inline errors. If inline validation is required, consider removing maxLength and relying on Yup with Formik’s onChange handler instead.
7. Why would I use FieldArray with validation in Formik?
8. FieldArray allows developers to handle dynamic forms where multiple fields follow similar validation rules, making it ideal for lists of items like comments or tags where each entry has specific requirements.
9. What is a debounce function, and why use it with Formik validation?
10. Debouncing is a technique that delays validation until the user has paused typing, reducing excessive validation calls. It’s especially helpful for longer text fields, preventing premature validation messages that may distract users.
11. What are best practices for validating multiple fields with Yup?
12. Use Yup’s object and array schemas to define complex validation, and apply custom error messages to make it clear which fields are not meeting requirements.
13. How can I display remaining characters to the user dynamically?
14. Using helperText in Material-UI’s TextField component allows real-time character count display, which can improve usability by helping users track their remaining input capacity.
15. Can backend validation replace frontend validation with Yup?
16. Backend validation is crucial for data integrity, but frontend validation provides immediate feedback to users, improving their experience. Both are recommended to handle data securely and user-friendly.
17. What’s the advantage of removing the maxLength attribute for inline validation?
18. Removing maxLength gives Formik and Yup full control over the validation process, allowing inline errors to display as soon as the character limit is exceeded, without restricting input length directly.

Final Thoughts on Real-Time Inline Validation

Implementing inline validation with Formik and Yup provides a smoother, more interactive user experience for character-limited fields. By removing maxLength and using Formik's setFieldTouched strategically, users can get instant feedback without being interrupted by hard limits. This technique is ideal for scenarios like application forms or bio fields.

This approach offers flexibility and can be customized further to fit specific needs. Inline validation for character limits ensures data consistency and a user-friendly experience, especially when managing multiple character-based fields. By combining Formik, Yup, and JavaScript, developers can offer both intuitive and robust validation for users. 🚀