ਪ੍ਰਤੀਕਿਰਿਆ ਫਾਰਮਾਂ ਵਿੱਚ ਇਨਲਾਈਨ ਅੱਖਰ ਸੀਮਾ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਯੂਪ ਅਤੇ ਫਾਰਮਿਕ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

Formik, Yup, ਅਤੇ TypeScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਪ੍ਰਤੀਕਿਰਿਆ ਫਾਰਮ ਵਿੱਚ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

ਹੱਲ 1: ਅੱਖਰ ਸੀਮਾ 'ਤੇ ਯੂਪ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਨਾਲ ਫਰੰਟਐਂਡ ਫਾਰਮ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ

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;

maxLength ਸੰਪੱਤੀ ਦੇ ਬਿਨਾਂ ਵਿਕਲਪਕ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ

ਹੱਲ 2: ਇਨਪੁਟ ਨੂੰ ਬਲੌਕ ਕੀਤੇ ਬਿਨਾਂ ਮੈਨੂਅਲ ਅੱਖਰ ਲੰਬਾਈ ਪ੍ਰਮਾਣਿਕਤਾ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ

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;

ਅੱਖਰ ਸੀਮਾ ਲਈ Express.js ਅਤੇ ਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬੈਕਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ

ਹੱਲ 3: ਐਕਸਪ੍ਰੈਸ ਅਤੇ ਯੱਪ ਦੇ ਨਾਲ Node.js ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬੈਕਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ

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'));

Formik and Yup ਵਿੱਚ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

1. ਵਰਤਣ ਦਾ ਮੁੱਖ ਮਕਸਦ ਕੀ ਹੈ Formik ਪ੍ਰਮਾਣਿਕਤਾ ਲਈ ਹਾਂ ਨਾਲ?
2. Formik ਅਤੇ Yup ਦਾ ਸੁਮੇਲ ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਫਾਰਮ ਹੈਂਡਲਿੰਗ ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਗੁੰਝਲਦਾਰ ਪ੍ਰਮਾਣਿਕਤਾ ਲੋੜਾਂ ਵਾਲੇ ਵੱਡੇ ਫਾਰਮਾਂ ਜਾਂ ਫਾਰਮਾਂ ਲਈ। ਫਾਰਮਿਕ ਫਾਰਮ ਸਟੇਟ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਯੂਪ ਪ੍ਰਮਾਣਿਕਤਾ ਸਕੀਮਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
3. ਕਿਵੇਂ ਕਰਦਾ ਹੈ setFieldTouched ਤੋਂ ਵੱਖਰਾ ਹੈ setFieldValue ਫਾਰਮਿਕ ਵਿੱਚ?
4. setFieldTouched ਇੱਕ ਫੀਲਡ ਦੀ "ਛੋਹ ਗਈ" ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ, ਇਸਨੂੰ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਇੰਟਰੈਕਟ ਕੀਤੇ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕਰਦਾ ਹੈ, ਜਦੋਂ ਕਿ setFieldValue ਸਿੱਧੇ ਖੇਤਰ ਦੇ ਮੁੱਲ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ. ਇਕੱਠੇ, ਉਹ ਇਹ ਪ੍ਰਬੰਧਨ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਪ੍ਰਮਾਣਿਕਤਾ ਕਦੋਂ ਅਤੇ ਕਿਵੇਂ ਹੁੰਦੀ ਹੈ।
5. ਕੀ ਮੈਂ ਦੋਵੇਂ ਦੇਸੀ ਵਰਤ ਸਕਦਾ ਹਾਂ maxLength ਅਤੇ ਹਾਂ ਪ੍ਰਮਾਣਿਕਤਾ?
6. maxLength ਦੀ ਵਰਤੋਂ ਨਾਲ ਅਗਲੇ ਸਿਰੇ 'ਤੇ ਇਨਪੁਟ ਲੰਬਾਈ ਨੂੰ ਸੀਮਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਪਰ ਯੁਪ ਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਇਨਲਾਈਨ ਗਲਤੀਆਂ ਲਈ ਟਰਿੱਗਰ ਹੋਣ ਤੋਂ ਰੋਕ ਸਕਦਾ ਹੈ। ਜੇਕਰ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ maxLength ਨੂੰ ਹਟਾਉਣ ਅਤੇ ਇਸ ਦੀ ਬਜਾਏ Formik ਦੇ onChange ਹੈਂਡਲਰ ਨਾਲ Yup 'ਤੇ ਭਰੋਸਾ ਕਰਨ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।
7. ਮੈਂ ਕਿਉਂ ਵਰਤਾਂਗਾ FieldArray ਫਾਰਮਿਕ ਵਿੱਚ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਨਾਲ?
8. FieldArray ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਜਿੱਥੇ ਕਈ ਖੇਤਰ ਸਮਾਨ ਪ੍ਰਮਾਣਿਕਤਾ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ, ਇਸ ਨੂੰ ਟਿੱਪਣੀਆਂ ਜਾਂ ਟੈਗਾਂ ਵਰਗੀਆਂ ਆਈਟਮਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦੇ ਹਨ ਜਿੱਥੇ ਹਰੇਕ ਐਂਟਰੀ ਲਈ ਖਾਸ ਲੋੜਾਂ ਹੁੰਦੀਆਂ ਹਨ।
9. ਇੱਕ ਡੀਬਾਊਂਸ ਫੰਕਸ਼ਨ ਕੀ ਹੈ, ਅਤੇ ਇਸਨੂੰ ਫਾਰਮਿਕ ਪ੍ਰਮਾਣਿਕਤਾ ਨਾਲ ਕਿਉਂ ਵਰਤਣਾ ਹੈ?
10. ਡੀਬਾਉਂਸਿੰਗ ਇੱਕ ਤਕਨੀਕ ਹੈ ਜੋ ਪ੍ਰਮਾਣਿਕਤਾ ਵਿੱਚ ਦੇਰੀ ਕਰਦੀ ਹੈ ਜਦੋਂ ਤੱਕ ਉਪਭੋਗਤਾ ਟਾਈਪਿੰਗ ਨੂੰ ਰੋਕ ਨਹੀਂ ਦਿੰਦਾ, ਬਹੁਤ ਜ਼ਿਆਦਾ ਪ੍ਰਮਾਣਿਕਤਾ ਕਾਲਾਂ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਲੰਬੇ ਟੈਕਸਟ ਖੇਤਰਾਂ ਲਈ ਮਦਦਗਾਰ ਹੈ, ਅਚਨਚੇਤੀ ਪ੍ਰਮਾਣਿਕਤਾ ਸੰਦੇਸ਼ਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਦਾ ਧਿਆਨ ਭਟਕ ਸਕਦੇ ਹਨ।
11. Yup ਨਾਲ ਕਈ ਖੇਤਰਾਂ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਕੀ ਹਨ?
12. ਯੂਪ ਦੀ ਵਰਤੋਂ ਕਰੋ object ਅਤੇ array ਗੁੰਝਲਦਾਰ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸਕੀਮਾਂ, ਅਤੇ ਇਹ ਸਪੱਸ਼ਟ ਕਰਨ ਲਈ ਕਸਟਮ ਗਲਤੀ ਸੁਨੇਹੇ ਲਾਗੂ ਕਰੋ ਕਿ ਕਿਹੜੇ ਖੇਤਰ ਲੋੜਾਂ ਪੂਰੀਆਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹਨ।
13. ਮੈਂ ਉਪਭੋਗਤਾ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਬਾਕੀ ਬਚੇ ਅੱਖਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦਾ ਹਾਂ?
14. ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ helperText Material-UI ਦੇ ਟੈਕਸਟਫੀਲਡ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਰੀਅਲ-ਟਾਈਮ ਅੱਖਰ ਗਿਣਤੀ ਡਿਸਪਲੇਅ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਬਾਕੀ ਬਚੀ ਇਨਪੁਟ ਸਮਰੱਥਾ ਨੂੰ ਟਰੈਕ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਕੇ ਉਪਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰ ਸਕਦਾ ਹੈ।
15. ਕੀ ਬੈਕਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ ਯੱਪ ਨਾਲ ਫਰੰਟਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਬਦਲ ਸਕਦੀ ਹੈ?
16. ਬੈਕਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ ਡੇਟਾ ਦੀ ਇਕਸਾਰਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਪਰ ਫਰੰਟਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਉਹਨਾਂ ਦੇ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ। ਦੋਵਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਢੰਗ ਨਾਲ ਡਾਟਾ ਸੰਭਾਲਣ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
17. ਨੂੰ ਹਟਾਉਣ ਦਾ ਕੀ ਫਾਇਦਾ ਹੈ maxLength ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ?
18. ਹਟਾ ਰਿਹਾ ਹੈ maxLength ਫਾਰਮਿਕ ਅਤੇ ਯੂਪ ਨੂੰ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰਕਿਰਿਆ 'ਤੇ ਪੂਰਾ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇਨਪੁਟ ਲੰਬਾਈ ਨੂੰ ਸੀਮਤ ਕੀਤੇ ਬਿਨਾਂ, ਅੱਖਰ ਦੀ ਸੀਮਾ ਤੋਂ ਵੱਧ ਹੁੰਦੇ ਹੀ ਇਨਲਾਈਨ ਗਲਤੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਰੀਅਲ-ਟਾਈਮ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ

Formik ਅਤੇ Yup ਨਾਲ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਅੱਖਰ-ਸੀਮਤ ਖੇਤਰਾਂ ਲਈ ਇੱਕ ਨਿਰਵਿਘਨ, ਵਧੇਰੇ ਇੰਟਰਐਕਟਿਵ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਦੂਰ ਕਰਕੇ ਅਧਿਕਤਮ ਲੰਬਾਈ ਅਤੇ ਫਾਰਮਿਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ setFieldTouched ਰਣਨੀਤਕ ਤੌਰ 'ਤੇ, ਉਪਭੋਗਤਾ ਸਖ਼ਤ ਸੀਮਾਵਾਂ ਦੁਆਰਾ ਰੋਕੇ ਬਿਨਾਂ ਤੁਰੰਤ ਫੀਡਬੈਕ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ। ਇਹ ਤਕਨੀਕ ਐਪਲੀਕੇਸ਼ਨ ਫਾਰਮਾਂ ਜਾਂ ਬਾਇਓ ਫੀਲਡਾਂ ਵਰਗੇ ਦ੍ਰਿਸ਼ਾਂ ਲਈ ਆਦਰਸ਼ ਹੈ।

ਇਹ ਪਹੁੰਚ ਲਚਕਤਾ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੀ ਹੈ ਅਤੇ ਖਾਸ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਹੋਰ ਅਨੁਕੂਲਿਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਅੱਖਰ ਸੀਮਾਵਾਂ ਲਈ ਇਨਲਾਈਨ ਪ੍ਰਮਾਣਿਕਤਾ ਡੇਟਾ ਇਕਸਾਰਤਾ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਕਈ ਅੱਖਰ-ਅਧਾਰਿਤ ਖੇਤਰਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦੇ ਹੋ। Formik, Yup, ਅਤੇ JavaScript ਨੂੰ ਮਿਲਾ ਕੇ, ਡਿਵੈਲਪਰ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਅਨੁਭਵੀ ਅਤੇ ਮਜ਼ਬੂਤ ​​ਪ੍ਰਮਾਣਿਕਤਾ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰ ਸਕਦੇ ਹਨ। 🚀