Usando Yup e Formik para implementar validação de limite de caracteres inline em formulários React

Implementando validação inline em um formulário React usando Formik, Yup e TypeScript

Solução 1: Formulário React Frontend com validação Yup no limite de caracteres

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;

Validação in-line alternativa sem a propriedade maxLength

Solução 2: reagir com validação manual do comprimento de caracteres sem bloquear a entrada

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;

Validação de back-end usando Express.js e Yup para limite de caracteres

Solução 3: validação de back-end usando Node.js com Express e 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'));

Perguntas frequentes sobre validação inline em Formik e Yup

1. Qual é o principal objetivo do uso Formik com Yup para validação?
2. A combinação de Formik e Yup simplifica o manuseio e validação de formulários em aplicativos React, especialmente para formulários maiores ou com necessidades complexas de validação. Formik gerencia o estado do formulário, enquanto Yup lida com esquemas de validação.
3. Como é que setFieldTouched diferir de setFieldValue em Formik?
4. setFieldTouched atualiza o status “tocado” de um campo, marcando-o como interagido para fins de validação, enquanto setFieldValue atualiza diretamente o valor do campo. Juntos, eles ajudam a gerenciar quando e como a validação ocorre.
5. Posso usar ambos nativos maxLength e sim validação?
6. O uso de maxLength limita o comprimento da entrada no front-end, mas pode impedir que a validação do Yup seja acionada para erros in-line. Se a validação in-line for necessária, considere remover maxLength e confiar no Yup com o manipulador onChange do Formik.
7. Por que eu usaria FieldArray com validação no Formik?
8. FieldArray permite aos desenvolvedores lidar com formulários dinâmicos onde vários campos seguem regras de validação semelhantes, tornando-o ideal para listas de itens como comentários ou tags onde cada entrada tem requisitos específicos.
9. O que é uma função debounce e por que usá-la com a validação Formik?
10. Debouncing é uma técnica que atrasa a validação até que o usuário pause a digitação, reduzindo chamadas de validação excessivas. É especialmente útil para campos de texto mais longos, evitando mensagens de validação prematuras que podem distrair os usuários.
11. Quais são as práticas recomendadas para validar vários campos com Yup?
12. Use o Yup's object e array esquemas para definir validação complexa e aplicar mensagens de erro personalizadas para deixar claro quais campos não atendem aos requisitos.
13. Como posso exibir os caracteres restantes para o usuário dinamicamente?
14. Usando helperText no componente TextField do Material-UI permite a exibição da contagem de caracteres em tempo real, o que pode melhorar a usabilidade, ajudando os usuários a rastrear sua capacidade de entrada restante.
15. A validação de backend pode substituir a validação de frontend pelo Yup?
16. A validação de backend é crucial para a integridade dos dados, mas a validação de frontend fornece feedback imediato aos usuários, melhorando sua experiência. Ambos são recomendados para lidar com dados de forma segura e fácil de usar.
17. Qual é a vantagem de remover o maxLength atributo para validação in-line?
18. Removendo maxLength dá a Formik e Yup controle total sobre o processo de validação, permitindo que erros embutidos sejam exibidos assim que o limite de caracteres for excedido, sem restringir diretamente o comprimento da entrada.

Considerações finais sobre validação inline em tempo real

A implementação da validação inline com Formik e Yup fornece uma experiência de usuário mais suave e interativa para campos limitados por caracteres. Ao remover comprimento máximo e usando Formik setFieldTouched estrategicamente, os usuários podem obter feedback instantâneo sem serem interrompidos por limites rígidos. Esta técnica é ideal para cenários como formulários de inscrição ou áreas biológicas.

Essa abordagem oferece flexibilidade e pode ser personalizada ainda mais para atender a necessidades específicas. A validação em linha para limites de caracteres garante a consistência dos dados e uma experiência amigável, especialmente ao gerenciar vários campos baseados em caracteres. Ao combinar Formik, Yup e JavaScript, os desenvolvedores podem oferecer validação intuitiva e robusta para os usuários. 🚀