{"id":89010,"date":"2024-12-20T02:26:46","date_gmt":"2024-12-19T22:56:46","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/form-validation-with-yup-2kmg\/"},"modified":"2024-12-20T02:26:46","modified_gmt":"2024-12-19T22:56:46","slug":"form-validation-with-yup-2kmg","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/form-validation-with-yup-2kmg\/","title":{"rendered":"\u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0641\u0631\u0645 \u0628\u0627 \u0627\u0646\u062c\u0645\u0646 DEV – YUP"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0641\u0631\u0645 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 React with Yup \u0633\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628\u060c \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0641\u0631\u0645 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u06cc\u06a9\u067e\u0627\u0631\u0686\u06af\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0633\u062a. \u0627\u06af\u0631 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0631\u0627\u0647\u06cc \u0633\u0627\u062f\u0647 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0641\u0631\u0645 \u0647\u0627 \u062f\u0631 React \u0647\u0633\u062a\u06cc\u062f\u060c \u0628\u0644\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u062f\u0648\u0633\u062a \u0634\u0645\u0627\u0633\u062a \u0627\u06cc\u0646 \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Yup \u0648 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0631\u0645 \u0635\u06cc\u0642\u0644 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0622\u0646\u0686\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a<\/p>\n

\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0648\u0628\u0644\u0627\u06af\u060c \u0634\u0645\u0627 \u0645\u06cc \u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647:<\/p>\n

Yup \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0631 React \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.
\n\u06cc\u06a9 \u0641\u0631\u0645 \u0628\u0627 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f.
\n\u0641\u0631\u0645 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u062e\u0627\u0631\u062c\u06cc \u0633\u0628\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u063a\u0648\u0627\u0635\u06cc\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647:<\/p>\n

\u062f\u0627\u0646\u0634 \u0627\u0648\u0644\u06cc\u0647 React
\nNode.js \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 1: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0644\u0647<\/p>\n

\u0627\u0628\u062a\u062f\u0627 Yup \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 React \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f. \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n

npm install yup<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u0627\u06cc\u062c\u0627\u062f \u0641\u0631\u0645<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0641\u0631\u0645 \u0633\u0627\u062f\u0647 \u0628\u0627 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0646\u0627\u0645 \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0645\u0627 \u0627\u0632 useState React \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0648 \u062e\u0637\u0627\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

import React, { useState } from ‘react’;<\/p>\n

function MyForm() {
\n const [formData, setFormData] = useState({ name: ”, email: ” });
\n const [errors, setErrors] = useState({});<\/p>\n

const handleChange = (e) => {
\n setFormData({ …formData, [e.target.name]: e.target.value });
\n };<\/p>\n

const handleSubmit = (e) => {
\n e.preventDefault();
\n \/\/ Validation will go here
\n };<\/p>\n

return (
\n <form onSubmit={handleSubmit}>
\n <div>
\n <label>Name:label>
\n <input
\n type=”text”
\n name=”name”
\n value={formData.name}
\n onChange={handleChange}
\n \/>
\n div>
\n <div>
\n <label>Email:label>
\n <input
\n type=”email”
\n name=”email”
\n value={formData.email}
\n onChange={handleChange}
\n \/>
\n div>
\n <button type=”submit”>Submitbutton>
\n form>
\n );
\n}<\/p>\n

export default MyForm;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 3:<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0627\u062f\u063a\u0627\u0645 Yup \u0627\u0633\u062a. \u0645\u0646 \u06cc\u06a9 \u0637\u0631\u062d \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u067e\u0633 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0645 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n

import * as Yup from “yup”<\/p>\n

const validationSchema = Yup.object({
\nname: Yup.string().required(‘Name is required!’)
\nemail: Yup.string().email(‘Your email is invalid’).required(’email is required’)
\n})<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0646 \u0627\u0632 \u0627\u06cc\u0646 \u0637\u0631\u062d \u062f\u0631 handleSubmit \u062a\u0627\u0628\u0639 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0641\u0631\u0645 \u0627\u0633\u062a<\/p>\n

const handleSubmit = (e) => {
\n e.preventDefault();
\n try {
\n await validationSchema.validate(formData, { abortEarly: false });
\n setErrors({});
\n alert(‘Form is valid!’);
\n } catch (err) {
\n const newErrors = {};
\n err.inner.forEach((error) => {
\n newErrors[error.path] = error.message;
\n });
\n setErrors(newErrors);
\n }
\n };<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 4: \u062d\u0627\u0644\u062a \u062f\u0627\u062f\u0646 \u0628\u0647 \u0641\u0631\u0645<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0641\u0631\u0645 \u062e\u0648\u0628 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 CSS \u062e\u0627\u0631\u062c\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f (MyForm.css) \u0648 \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

.form-container {
\n max-width: 400px;
\n margin: 50px auto;
\n padding: 20px;
\n background: #f9f9f9;
\n border-radius: 8px;
\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
\n}
\n.label {
\n font-weight: bold;
\n}
\n.input {
\n width: 100%;
\n padding: 10px;
\n margin: 5px 0;
\n border-radius: 4px;
\n}
\n.error {
\n color: red;
\n font-size: 12px;
\n}
\n.button {
\n background: #4caf50;
\n color: white;
\n padding: 10px;
\n border: none;
\n border-radius: 4px;
\n cursor: pointer;
\n}
\n.button:hover {
\n background: #45a049;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0641\u0627\u06cc\u0644 CSS \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

import ‘.\/MyForm.css’;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u062f \u06a9\u0627\u0645\u0644:<\/p>\n

import React, { useState } from ‘react’;
\nimport * as Yup from ‘yup’;
\nimport ‘.\/MyForm.css’;<\/p>\n

function MyForm() {
\n const [formData, setFormData] = useState({ name: ”, email: ” });
\n const [errors, setErrors] = useState({});<\/p>\n

const validationSchema = Yup.object({
\n name: Yup.string().required(‘Name is required!’),
\n email: Yup.string().email(‘Invalid email!’).required(‘Email is required!’),
\n });<\/p>\n

const handleChange = (e) => {
\n setFormData({ …formData, [e.target.name]: e.target.value });
\n };<\/p>\n

const handleSubmit = async (e) => {
\n e.preventDefault();
\n try {
\n await validationSchema.validate(formData, { abortEarly: false });
\n setErrors({});
\n alert(‘Form is valid!’);
\n } catch (err) {
\n const newErrors = {};
\n err.inner.forEach((error) => {
\n newErrors[error.path] = error.message;
\n });
\n setErrors(newErrors);
\n }
\n };<\/p>\n

return (
\n <div className=”form-container”>
\n <h1>Simple Formh1>
\n <form onSubmit={handleSubmit}>
\n <div>
\n <label className=”label”>Name:label>
\n <input
\n type=”text”
\n name=”name”
\n value={formData.name}
\n onChange={handleChange}
\n className=”input”
\n \/>
\n {errors.name && <div className=”error”>{errors.name}div>}
\n div>
\n <div>
\n <label className=”label”>Email:label>
\n <input
\n type=”email”
\n name=”email”
\n value={formData.email}
\n onChange={handleChange}
\n className=”input”
\n \/>
\n {errors.email && <div className=”error”>{errors.email}div>}
\n div>
\n <button type=”submit” className=”button”>Submitbutton>
\n form>
\n div>
\n );
\n}<\/p>\n

export default MyForm;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

Yup \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0641\u0631\u0645 \u0627\u0633\u062a\u060c \u062d\u062a\u06cc \u0628\u062f\u0648\u0646 Formik. \u062a\u0646\u0647\u0627 \u0628\u0627 \u0686\u0646\u062f \u062e\u0637 \u06a9\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0642\u0648\u06cc \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n