React useFormState Validatsiyasi: Forma Holatini Boshqarishni Yaxshilash bo'yicha To'liq Qo'llanma

            
// Faraziy useFormState implementatsiyasi yoki @mantine/form kabi kutubxonaga asoslangan
import React from 'react';
import { useFormState } from './useFormState'; // Haqiqiy import bilan almashtiring

function ContactForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      name: '',
      email: '',
      message: '',
    },
    validationRules: {
      name: (value) => (value ? null : 'Ism kiritilishi shart'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Noto\'g\'ri elektron pochta manzili'),
      message: (value) => (value ? null : 'Xabar kiritilishi shart'),
    },
    onSubmit: (values) => {
      console.log('Forma yuborildi:', values);
      // Bu yerga forma yuborish mantig\'ingizni qo\'shing
    },
  });

  return (
    

      

        Ism:
        
        {errors.name && touched.name && {errors.name}}
      
      

        Elektron pochta:
        
        {errors.email && touched.email && {errors.email}}
      
      

        Xabar:
                {errors.message && touched.message && <span className="error">{errors.message}</span>}
      </div>
      <button type="submit">Yuborish</button>
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEZhcmF6aXkgdXNlRm9ybVN0YXRlIGltcGxlbWVudGF0c2l5YXNpIHlva2kgQG1hbnRpbmUvZm9ybSBrYWJpIGt1dHVieG9uYWdhIGFzb3NsYW5nYW4KaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBIYXFpcWl5IGltcG9ydCBiaWxhbiBhbG1hc2h0aXJpbmcKCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgdmFsdWVzLCBlcnJvcnMsIHRvdWNoZWQsIGhhbmRsZUNoYW5nZSwgaGFuZGxlU3VibWl0IH0gPSB1c2VGb3JtU3RhdGUoewogICAgaW5pdGlhbFZhbHVlczogewogICAgICBuYW1lOiAnJywKICAgICAgZW1haWw6ICcnLAogICAgICBtZXNzYWdlOiAnJywKICAgIH0sCiAgICB2YWxpZGF0aW9uUnVsZXM6IHsKICAgICAgbmFtZTogKHZhbHVlKSA9PiAodmFsdWUgPyBudWxsIDogJ0lzbSBraXJpdGlsaXNoaSBzaGFydCcpLAogICAgICBlbWFpbDogKHZhbHVlKSA9PiAodmFsdWUgJiYgL15bXlxzQF0rQFteXHNAXStcLlteXHNAXSskLy50ZXN0KHZhbHVlKSA/IG51bGwgOiAnTm90b1wnZ1wncmkgZWxla3Ryb24gcG9jaHRhIG1hbnppbGknKSwKICAgICAgbWVzc2FnZTogKHZhbHVlKSA9PiAodmFsdWUgPyBudWxsIDogJ1hhYmFyIGtpcml0aWxpc2hpIHNoYXJ0JyksCiAgICB9LAogICAgb25TdWJtaXQ6ICh2YWx1ZXMpID0+IHsKICAgICAgY29uc29sZS5sb2coJ0Zvcm1hIHl1Ym9yaWxkaTonLCB2YWx1ZXMpOwogICAgICAvLyBCdSB5ZXJnYSBmb3JtYSB5dWJvcmlzaCBtYW50aWdcJ2luZ2l6bmkgcW9cJ3NoaW5nCiAgICB9LAogIH0pOwoKICByZXR1cm4gKAogICAgPGZvcm0gb25TdWJtaXQ9e2hhbmRsZVN1Ym1pdH0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPklzbTo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICAgIGlkPSJuYW1lIgogICAgICAgICAgbmFtZT0ibmFtZSIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMubmFtZX0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLm5hbWUgJiYgdG91Y2hlZC5uYW1lICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMubmFtZX08L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVsZWt0cm9uIHBvY2h0YTo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0iZW1haWwiCiAgICAgICAgICBpZD0iZW1haWwiCiAgICAgICAgICBuYW1lPSJlbWFpbCIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMuZW1haWx9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5lbWFpbCAmJiB0b3VjaGVkLmVtYWlsICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMuZW1haWx9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPlhhYmFyOjwvbGFiZWw+CiAgICAgICAgPHRleHRhcmVhCiAgICAgICAgICBpZD0ibWVzc2FnZSIKICAgICAgICAgIG5hbWU9Im1lc3NhZ2UiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLm1lc3NhZ2V9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5tZXNzYWdlICYmIHRvdWNoZWQubWVzc2FnZSAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLm1lc3NhZ2V9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5ZdWJvcmlzaDwvYnV0dG9uPgogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Tushuntirish:</b></p>
<ul>
  <li>Biz <code>useFormState</code>'ni forma maydonlari uchun dastlabki qiymatlar va validatsiya qoidalari bilan initsializatsiya qilamiz.</li>
  <li><code>handleChange</code> funksiyasi har qanday kiritish maydoni o'zgarganda forma holatini yangilaydi.</li>
  <li><code>handleSubmit</code> funksiyasi forma yuborilganda chaqiriladi. U ma'lumotlarni yuborishdan oldin validatsiya xatolarini tekshiradi.</li>
  <li>Agar validatsiya xatolari mavjud bo'lsa va maydonga tegib o'tilgan (fokusdan chiqarilgan) bo'lsa, xato xabarlari tegishli kiritish maydonlari yonida ko'rsatiladi.</li>
</ul>

<h3>2-misol: Parolni tasdiqlash bilan ro'yxatdan o'tish formasi</h3>

<p>Ushbu misol foydalanuvchi nomi, elektron pochta, parol va parolni tasdiqlash maydonlariga ega ro'yxatdan o'tish formasini namoyish etadi. Barcha maydonlar majburiy ekanligini, elektron pochta manzilining to'g'riligini, parolning ma'lum mezonlarga (masalan, minimal uzunlik) javob berishini va parolni tasdiqlash parol bilan mos kelishini ta'minlash uchun validatsiyani amalga oshiramiz.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Faraziy useFormState implementatsiyasi yoki @mantine/form kabi kutubxonaga asoslangan
import React from 'react';
import { useFormState } from './useFormState'; // Haqiqiy import bilan almashtiring

function RegistrationForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      username: '',
      email: '',
      password: '',
      passwordConfirmation: '',
    },
    validationRules: {
      username: (value) => (value ? null : 'Foydalanuvchi nomi kiritilishi shart'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Noto\'g\'ri elektron pochta manzili'),
      password: (value) => (value && value.length >= 8 ? null : 'Parol kamida 8 belgidan iborat bo\'lishi kerak'),
      passwordConfirmation: (value) =>
        value === values.password ? null : 'Parolni tasdiqlash parolga mos kelmadi',
    },
    onSubmit: (values) => {
      console.log('Forma yuborildi:', values);
      // Bu yerga forma yuborish mantig\'ingizni qo\'shing
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Foydalanuvchi nomi:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {errors.username && touched.username && <span className="error">{errors.username}</span>}
      </div>
      <div>
        <label htmlFor="email">Elektron pochta:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && touched.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">Parol:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && touched.password && <span className="error">{errors.password}</span>}
      </div>
      <div>
        <label htmlFor="passwordConfirmation">Parolni tasdiqlash:</label>
        <input
          type="password"
          id="passwordConfirmation"
          name="passwordConfirmation"
          value={values.passwordConfirmation}
          onChange={handleChange}
        />
        {errors.passwordConfirmation && touched.passwordConfirmation && (
          <span className="error">{errors.passwordConfirmation}</span>
        )}
      </div>
      <button type="submit">Ro'yxatdan o'tish</button>
    </form>
  );
}

export default RegistrationForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEZhcmF6aXkgdXNlRm9ybVN0YXRlIGltcGxlbWVudGF0c2l5YXNpIHlva2kgQG1hbnRpbmUvZm9ybSBrYWJpIGt1dHVieG9uYWdhIGFzb3NsYW5nYW4KaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBIYXFpcWl5IGltcG9ydCBiaWxhbiBhbG1hc2h0aXJpbmcKCmZ1bmN0aW9uIFJlZ2lzdHJhdGlvbkZvcm0oKSB7CiAgY29uc3QgeyB2YWx1ZXMsIGVycm9ycywgdG91Y2hlZCwgaGFuZGxlQ2hhbmdlLCBoYW5kbGVTdWJtaXQgfSA9IHVzZUZvcm1TdGF0ZSh7CiAgICBpbml0aWFsVmFsdWVzOiB7CiAgICAgIHVzZXJuYW1lOiAnJywKICAgICAgZW1haWw6ICcnLAogICAgICBwYXNzd29yZDogJycsCiAgICAgIHBhc3N3b3JkQ29uZmlybWF0aW9uOiAnJywKICAgIH0sCiAgICB2YWxpZGF0aW9uUnVsZXM6IHsKICAgICAgdXNlcm5hbWU6ICh2YWx1ZSkgPT4gKHZhbHVlID8gbnVsbCA6ICdGb3lkYWxhbnV2Y2hpIG5vbWkga2lyaXRpbGlzaGkgc2hhcnQnKSwKICAgICAgZW1haWw6ICh2YWx1ZSkgPT4gKHZhbHVlICYmIC9eW15cc0BdK0BbXlxzQF0rXC5bXlxzQF0rJC8udGVzdCh2YWx1ZSkgPyBudWxsIDogJ05vdG9cJ2dcJ3JpIGVsZWt0cm9uIHBvY2h0YSBtYW56aWxpJyksCiAgICAgIHBhc3N3b3JkOiAodmFsdWUpID0+ICh2YWx1ZSAmJiB2YWx1ZS5sZW5ndGggPj0gOCA/IG51bGwgOiAnUGFyb2wga2FtaWRhIDggYmVsZ2lkYW4gaWJvcmF0IGJvXCdsaXNoaSBrZXJhaycpLAogICAgICBwYXNzd29yZENvbmZpcm1hdGlvbjogKHZhbHVlKSA9PgogICAgICAgIHZhbHVlID09PSB2YWx1ZXMucGFzc3dvcmQgPyBudWxsIDogJ1Bhcm9sbmkgdGFzZGlxbGFzaCBwYXJvbGdhIG1vcyBrZWxtYWRpJywKICAgIH0sCiAgICBvblN1Ym1pdDogKHZhbHVlcykgPT4gewogICAgICBjb25zb2xlLmxvZygnRm9ybWEgeXVib3JpbGRpOicsIHZhbHVlcyk7CiAgICAgIC8vIEJ1IHllcmdhIGZvcm1hIHl1Ym9yaXNoIG1hbnRpZ1wnaW5naXpuaSBxb1wnc2hpbmcKICAgIH0sCiAgfSk7CgogIHJldHVybiAoCiAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0idXNlcm5hbWUiPkZveWRhbGFudXZjaGkgbm9taTo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICAgIGlkPSJ1c2VybmFtZSIKICAgICAgICAgIG5hbWU9InVzZXJuYW1lIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy51c2VybmFtZX0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLnVzZXJuYW1lICYmIHRvdWNoZWQudXNlcm5hbWUgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy51c2VybmFtZX08L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVsZWt0cm9uIHBvY2h0YTo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0iZW1haWwiCiAgICAgICAgICBpZD0iZW1haWwiCiAgICAgICAgICBuYW1lPSJlbWFpbCIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMuZW1haWx9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5lbWFpbCAmJiB0b3VjaGVkLmVtYWlsICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMuZW1haWx9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9InBhc3N3b3JkIj5QYXJvbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0icGFzc3dvcmQiCiAgICAgICAgICBpZD0icGFzc3dvcmQiCiAgICAgICAgICBuYW1lPSJwYXNzd29yZCIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMucGFzc3dvcmR9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5wYXNzd29yZCAmJiB0b3VjaGVkLnBhc3N3b3JkICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMucGFzc3dvcmR9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9InBhc3N3b3JkQ29uZmlybWF0aW9uIj5QYXJvbG5pIHRhc2RpcWxhc2g6PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9InBhc3N3b3JkIgogICAgICAgICAgaWQ9InBhc3N3b3JkQ29uZmlybWF0aW9uIgogICAgICAgICAgbmFtZT0icGFzc3dvcmRDb25maXJtYXRpb24iCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLnBhc3N3b3JkQ29uZmlybWF0aW9ufQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMucGFzc3dvcmRDb25maXJtYXRpb24gJiYgdG91Y2hlZC5wYXNzd29yZENvbmZpcm1hdGlvbiAmJiAoCiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLnBhc3N3b3JkQ29uZmlybWF0aW9ufTwvc3Bhbj4KICAgICAgICApfQogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlJvJ3l4YXRkYW4gbyd0aXNoPC9idXR0b24+CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgUmVnaXN0cmF0aW9uRm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Tushuntirish:</b></p>
<ul>
  <li>Biz <code>passwordConfirmation</code> maydonini qo'shdik va uning <code>password</code> maydoniga mos kelishini ta'minlash uchun validatsiya qoidasini qo'shdik.</li>
  <li><code>passwordConfirmation</code> uchun validatsiya qoidasi ikkita parol maydonini solishtirish uchun <code>values</code> obyektiga murojaat qiladi.</li>
</ul>

<h3>3-misol: Massiv maydonlariga ega dinamik forma</h3>

<p>Ushbu misol maydonlar soni dinamik ravishda o'zgarishi mumkin bo'lgan dinamik formani namoyish etadi. Bu profilga bir nechta ko'nikma yoki tajriba qo'shish kabi stsenariylar uchun foydalidir. Biz dinamik maydonlar qiymatlarini saqlash uchun massivdan foydalanamiz va maydonlarni qo'shish va olib tashlash uchun funksiyalarni taqdim etamiz.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Faraziy useFormState implementatsiyasi yoki @mantine/form kabi kutubxonaga asoslangan
import React, { useState } from 'react';
import { useFormState } from './useFormState'; // Haqiqiy import bilan almashtiring

function SkillsForm() {
  const [skills, setSkills] = useState(['']); // Boshlang'ich ko'nikma maydoni

  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: skills, // Ko'nikmalarning joriy holati bilan initsializatsiya qilish
    },
    validationRules: {
      skills: (value) => {
        // Validatsiya misoli: har bir ko'nikma bo'sh emasligiga ishonch hosil qilish
        for (let i = 0; i < value.length; i++) {
          if (!value[i]) {
            return 'Barcha ko\'nikmalar kiritilishi shart'; // Yagona xato xabarini qaytarish
          }
        }
        return null; // Agar barcha ko'nikmalar to'g'ri bo'lsa, xato yo'q
      },
    },
    onSubmit: (values) => {
      console.log('Forma yuborildi:', values);
      // Bu yerga forma yuborish mantig\'ingizni qo\'shing
    },
  });

  const handleSkillChange = (index, event) => {
    const newSkills = [...skills];
    newSkills[index] = event.target.value;
    setSkills(newSkills);

    // Massivni useFormState'dan tashqarida boshqarayotganimiz uchun forma holatini qo'lda yangilash
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  const addSkill = () => {
    setSkills([...skills, '']);
    // 'skills' maydoni uchun qayta validatsiyani qo'lda ishga tushirish
    handleChange({ target: { name: 'skills', value: [...skills, ''] } });
  };

  const removeSkill = (index) => {
    const newSkills = [...skills];
    newSkills.splice(index, 1);
    setSkills(newSkills);

    // 'skills' maydoni uchun qayta validatsiyani qo'lda ishga tushirish
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Ko'nikmalar:</label>
        {skills.map((skill, index) => (
          <div key={index}>
            <input
              type="text"
              value={skill}
              onChange={(event) => handleSkillChange(index, event)}
            />
            <button type="button" onClick={() => removeSkill(index)}>O'chirish</button>
          </div>
        ))}
        <button type="button" onClick={addSkill}>Ko'nikma qo'shish</button>
        {errors.skills && touched.skills && <span className="error">{errors.skills}</span>}
      </div>
      <button type="submit">Yuborish</button>
    </form>
  );
}

export default SkillsForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEZhcmF6aXkgdXNlRm9ybVN0YXRlIGltcGxlbWVudGF0c2l5YXNpIHlva2kgQG1hbnRpbmUvZm9ybSBrYWJpIGt1dHVieG9uYWdhIGFzb3NsYW5nYW4KaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnOwppbXBvcnQgeyB1c2VGb3JtU3RhdGUgfSBmcm9tICcuL3VzZUZvcm1TdGF0ZSc7IC8vIEhhcWlxaXkgaW1wb3J0IGJpbGFuIGFsbWFzaHRpcmluZwoKZnVuY3Rpb24gU2tpbGxzRm9ybSgpIHsKICBjb25zdCBbc2tpbGxzLCBzZXRTa2lsbHNdID0gdXNlU3RhdGUoWycnXSk7IC8vIEJvc2hsYW5nJ2ljaCBrbyduaWttYSBtYXlkb25pCgogIGNvbnN0IHsgdmFsdWVzLCBlcnJvcnMsIHRvdWNoZWQsIGhhbmRsZUNoYW5nZSwgaGFuZGxlU3VibWl0IH0gPSB1c2VGb3JtU3RhdGUoewogICAgaW5pdGlhbFZhbHVlczogewogICAgICBza2lsbHM6IHNraWxscywgLy8gS28nbmlrbWFsYXJuaW5nIGpvcml5IGhvbGF0aSBiaWxhbiBpbml0c2lhbGl6YXRzaXlhIHFpbGlzaAogICAgfSwKICAgIHZhbGlkYXRpb25SdWxlczogewogICAgICBza2lsbHM6ICh2YWx1ZSkgPT4gewogICAgICAgIC8vIFZhbGlkYXRzaXlhIG1pc29saTogaGFyIGJpciBrbyduaWttYSBibydzaCBlbWFzbGlnaWdhIGlzaG9uY2ggaG9zaWwgcWlsaXNoCiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB2YWx1ZS5sZW5ndGg7IGkrKykgewogICAgICAgICAgaWYgKCF2YWx1ZVtpXSkgewogICAgICAgICAgICByZXR1cm4gJ0JhcmNoYSBrb1wnbmlrbWFsYXIga2lyaXRpbGlzaGkgc2hhcnQnOyAvLyBZYWdvbmEgeGF0byB4YWJhcmluaSBxYXl0YXJpc2gKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgcmV0dXJuIG51bGw7IC8vIEFnYXIgYmFyY2hhIGtvJ25pa21hbGFyIHRvJ2cncmkgYm8nbHNhLCB4YXRvIHlvJ3EKICAgICAgfSwKICAgIH0sCiAgICBvblN1Ym1pdDogKHZhbHVlcykgPT4gewogICAgICBjb25zb2xlLmxvZygnRm9ybWEgeXVib3JpbGRpOicsIHZhbHVlcyk7CiAgICAgIC8vIEJ1IHllcmdhIGZvcm1hIHl1Ym9yaXNoIG1hbnRpZ1wnaW5naXpuaSBxb1wnc2hpbmcKICAgIH0sCiAgfSk7CgogIGNvbnN0IGhhbmRsZVNraWxsQ2hhbmdlID0gKGluZGV4LCBldmVudCkgPT4gewogICAgY29uc3QgbmV3U2tpbGxzID0gWy4uLnNraWxsc107CiAgICBuZXdTa2lsbHNbaW5kZXhdID0gZXZlbnQudGFyZ2V0LnZhbHVlOwogICAgc2V0U2tpbGxzKG5ld1NraWxscyk7CgogICAgLy8gTWFzc2l2bmkgdXNlRm9ybVN0YXRlJ2RhbiB0YXNocWFyaWRhIGJvc2hxYXJheW90Z2FuaW1peiB1Y2h1biBmb3JtYSBob2xhdGluaSBxbydsZGEgeWFuZ2lsYXNoCiAgICBoYW5kbGVDaGFuZ2UoeyB0YXJnZXQ6IHsgbmFtZTogJ3NraWxscycsIHZhbHVlOiBuZXdTa2lsbHMgfSB9KTsKICB9OwoKICBjb25zdCBhZGRTa2lsbCA9ICgpID0+IHsKICAgIHNldFNraWxscyhbLi4uc2tpbGxzLCAnJ10pOwogICAgLy8gJ3NraWxscycgbWF5ZG9uaSB1Y2h1biBxYXl0YSB2YWxpZGF0c2l5YW5pIHFvJ2xkYSBpc2hnYSB0dXNoaXJpc2gKICAgIGhhbmRsZUNoYW5nZSh7IHRhcmdldDogeyBuYW1lOiAnc2tpbGxzJywgdmFsdWU6IFsuLi5za2lsbHMsICcnXSB9IH0pOwogIH07CgogIGNvbnN0IHJlbW92ZVNraWxsID0gKGluZGV4KSA9PiB7CiAgICBjb25zdCBuZXdTa2lsbHMgPSBbLi4uc2tpbGxzXTsKICAgIG5ld1NraWxscy5zcGxpY2UoaW5kZXgsIDEpOwogICAgc2V0U2tpbGxzKG5ld1NraWxscyk7CgogICAgLy8gJ3NraWxscycgbWF5ZG9uaSB1Y2h1biBxYXl0YSB2YWxpZGF0c2l5YW5pIHFvJ2xkYSBpc2hnYSB0dXNoaXJpc2gKICAgIGhhbmRsZUNoYW5nZSh7IHRhcmdldDogeyBuYW1lOiAnc2tpbGxzJywgdmFsdWU6IG5ld1NraWxscyB9IH0pOwogIH07CgogIHJldHVybiAoCiAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWw+S28nbmlrbWFsYXI6PC9sYWJlbD4KICAgICAgICB7c2tpbGxzLm1hcCgoc2tpbGwsIGluZGV4KSA9PiAoCiAgICAgICAgICA8ZGl2IGtleT17aW5kZXh9PgogICAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgICB0eXBlPSJ0ZXh0IgogICAgICAgICAgICAgIHZhbHVlPXtza2lsbH0KICAgICAgICAgICAgICBvbkNoYW5nZT17KGV2ZW50KSA9PiBoYW5kbGVTa2lsbENoYW5nZShpbmRleCwgZXZlbnQpfQogICAgICAgICAgICAvPgogICAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgb25DbGljaz17KCkgPT4gcmVtb3ZlU2tpbGwoaW5kZXgpfT5PJ2NoaXJpc2g8L2J1dHRvbj4KICAgICAgICAgIDwvZGl2PgogICAgICAgICkpfQogICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBvbkNsaWNrPXthZGRTa2lsbH0+S28nbmlrbWEgcW8nc2hpc2g8L2J1dHRvbj4KICAgICAgICB7ZXJyb3JzLnNraWxscyAmJiB0b3VjaGVkLnNraWxscyAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLnNraWxsc308L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPll1Ym9yaXNoPC9idXR0b24+CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgU2tpbGxzRm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Tushuntirish:</b></p>
<ul>
  <li>Ushbu misol dinamik massiv uchun biroz ko'proq qo'lda holat boshqaruvini talab qiladi.</li>
  <li>Biz ko'nikmalar massivini boshqarish uchun <code>useState</code> hook'idan foydalanamiz.</li>
  <li><code>handleSkillChange</code>, <code>addSkill</code> va <code>removeSkill</code> funksiyalari massivni yangilaydi va forma holatini sinxronlashtirish uchun <code>useFormState</code>'ning <code>handleChange</code> funksiyasini qo'lda ishga tushiradi. Buning sababi, kutubxona ko'pincha *obyektlar* xususiyatlarini qayta ishlaydi, lekin yuqori darajadagi massiv mutatsiyalarini emas.</li>
  <li>Ko'nikmalar uchun validatsiya qoidasi barcha ko'nikmalar bo'sh emasligini tekshiradi.</li>
</ul>

<h2>Ilg'or Validatsiya Usullari</h2>

<p>Asosiy majburiy maydon validatsiyasidan tashqari, ma'lumotlar yaxlitligini ta'minlash va foydalanuvchi tajribasini yaxshilash uchun yanada ilg'or validatsiya usullarini qo'llashingiz mumkin. Mana bir nechta misollar:</p>

<ul>
  <li><b>Regular Ifodalar:</b> Elektron pochta manzillari, telefon raqamlari va boshqa ma'lumot formatlarini tekshirish uchun regular ifodalardan foydalaning.</li>
  <li><b>Maxsus Validatsiya Funksiyalari:</b> Noyob foydalanuvchi nomlarini tekshirish yoki parolning mustahkamligini tasdiqlash kabi murakkab validatsiya mantiqini amalga oshirish uchun maxsus validatsiya funksiyalarini yarating.</li>
  <li><b>Asinxron Validatsiya:</b> Formani yuborishdan oldin, masalan, foydalanuvchi nomining serverda mavjudligini tekshirish kabi asinxron validatsiyani bajaring. Bu odatda <code>react-hook-form</code> kabi kutubxonalar tomonidan qo'llab-quvvatlanadi.</li>
  <li><b>Shartli Validatsiya:</b> Formadagi boshqa maydonlar qiymatlariga asoslangan holda validatsiya qoidalarini qo'llang. Masalan, agar foydalanuvchi ma'lum bir mamlakatni tanlasa, faqat telefon raqamini talab qilishingiz mumkin.</li>
  <li><b>Uchinchi Tomon Validatsiya Kutubxonalari:</b> Validatsiya sxemalarini aniqlash va validatsiya mantiqini soddalashtirish uchun Yup yoki Zod kabi uchinchi tomon validatsiya kutubxonalari bilan integratsiya qiling. Bu kutubxonalar ko'pincha ma'lumotlarni o'zgartirish va majburlash kabi ilg'or xususiyatlarni taklif etadi.</li>
</ul>

<h2>Qulaylik (Accessibility) Masalalari</h2>

<p>Qulaylik (Accessibility) forma yaratishning muhim jihatidir. Quyidagi ko'rsatmalarga rioya qilish orqali formalaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling:</p>

<ul>
  <li><b>Aniq va Lo'nda Yorliqlar Taqdim Eting:</b> Barcha kiritish maydonlari uchun ularning maqsadini tushuntiruvchi tavsiflovchi yorliqlardan foydalaning.</li>
  <li><b>Semantik HTMLdan foydalaning:</b> Formalaringizni tuzish uchun <code><label></code>, <code><input></code> va <code><textarea></code> kabi semantik HTML elementlaridan foydalaning.</li>
  <li><b>Xato Xabarlarini Taqdim Eting:</b> Noto'g'ri kiritishlar haqida foydalanuvchilarni xabardor qilish uchun aniq va lo'nda xato xabarlarini ko'rsating.</li>
  <li><b>Yorliqlarni Kiritish Maydonlari bilan Bog'lang:</b> <code><label></code> elementlarida <code>for</code> atributidan foydalanib, ularni tegishli kiritish maydonlari bilan bog'lang.</li>
  <li><b>ARIA Atributlaridan foydalaning:</b> Yordamchi texnologiyalarga qo'shimcha ma'lumot berish uchun <code>aria-describedby</code> va <code>aria-invalid</code> kabi ARIA atributlaridan foydalaning.</li>
  <li><b>Klaviatura orqali Kirishni Ta'minlang:</b> Barcha forma elementlariga klaviatura yordamida kirish mumkinligiga ishonch hosil qiling.</li>
  <li><b>Yordamchi Texnologiyalar bilan Sinab Ko'ring:</b> Formalaringizni ekran o'quvchilari kabi yordamchi texnologiyalar bilan sinab ko'ring, ular nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling.</li>
</ul>

<h2>useFormState uchun Eng Yaxshi Amaliyotlar</h2>

<p><code>useFormState</code>'dan foydalanishda rioya qilish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:</p>

<ul>
  <li><b>Validatsiya Qoidalarini Lo'nda Tutish:</b> Validatsiya qoidalarini aniq va lo'nda tarzda belgilang.</li>
  <li><b>Foydalanuvchi uchun Qulay Xato Xabarlarini Taqdim Eting:</b> Tushunish oson bo'lgan va foydalanuvchilarga foydali yo'l-yo'riq ko'rsatadigan xato xabarlarini ko'rsating.</li>
  <li><b>Formalaringizni Puxta Sinab Ko'ring:</b> Formalaringiz to'g'ri ishlashiga va xatolarni to'g'ri qayta ishlashiga ishonch hosil qilish uchun ularni turli xil kiritish qiymatlari va stsenariylari bilan sinab ko'ring.</li>
  <li><b>Ishlash Samaradorligiga Ta'sirini Hisobga Oling:</b> Murakkab validatsiya qoidalari va asinxron validatsiyaning ishlash samaradorligiga ta'siridan xabardor bo'ling.</li>
  <li><b>Forma Kutubxonasidan Foydalaning:</b> Yaxshi tanilgan forma kutubxonasidan (<code>@mantine/form</code> yoki <code>react-hook-form</code> kabi) foydalanishni jiddiy o'ylab ko'ring, chunki ular tayyor holda mustahkam funksiyalar, ishlash samaradorligini optimallashtirish va qulaylikni yaxshilash vositalarini taqdim etadi. Velosipedni qayta ixtiro qilmang!</li>
</ul>

<h2>Forma Dizayni uchun Global Masalalar</h2>

<p>Global auditoriya uchun formalar yaratishda madaniy farqlar va mahalliylashtirish talablarini hisobga olish juda muhimdir. Mana bir nechta asosiy mulohazalar:</p>

<ul>
  <li><b>Manzil Formatlari:</b> Manzil formatlari mamlakatlar bo'yicha sezilarli darajada farq qiladi. Turli xil manzil tuzilmalariga mos keladigan moslashuvchan manzil maydonlarini taqdim eting. Tanlangan mamlakatga qarab manzil maydonlarini avtomatik ravishda sozlash uchun mamlakat tanlovchisidan foydalanishni o'ylab ko'ring.</li>
  <li><b>Telefon Raqami Formatlari:</b> Telefon raqami formatlari ham mamlakatlar bo'yicha farq qiladi. Mamlakat kodini tanlash imkoniyatini bering va foydalanuvchilarga telefon raqamlarini o'zlarining mahalliy formatlarida kiritishga ruxsat bering.</li>
  <li><b>Sana Formatlari:</b> Sana formatlari mamlakatlar bo'yicha farq qiladi. Turli sana formatlarini qo'llab-quvvatlaydigan sana tanlovchisidan foydalaning yoki foydalanuvchilarga o'zlari afzal ko'rgan sana formatini tanlashga ruxsat bering. Masalan, AQSh odatda OY/KUN/YIL formatidan foydalanadi, Yevropada esa ko'pincha KUN/OY/YIL ishlatiladi.</li>
  <li><b>Valyuta Formatlari:</b> Valyuta formatlari mamlakatlar bo'yicha farq qiladi. Valyuta belgilarini va formatlarini foydalanuvchining joylashuviga qarab ko'rsating.</li>
  <li><b>Ism Tartibi:</b> Ism tartibi madaniyatlar bo'yicha farq qiladi. Ba'zi madaniyatlarda avval ism, keyin familiya ishlatilsa, boshqalarida aksincha. Ism va familiya uchun alohida maydonlar yarating yoki foydalanuvchilarga o'zlari afzal ko'rgan ism tartibini belgilashga ruxsat bering.</li>
  <li><b>Tilni Qo'llab-quvvatlash:</b> Global auditoriyaga xizmat ko'rsatish uchun formalaringiz bir nechta tilda mavjudligiga ishonch hosil qiling. Forma yorliqlari, xato xabarlari va boshqa matnlarni tarjima qilish uchun mahalliylashtirish kutubxonasidan foydalaning.</li>
  <li><b>Madaniy Noziklik:</b> Formalaringizni loyihalashda madaniy nozikliklarni hisobga oling. Ayrim madaniyatlar uchun haqoratli bo'lishi mumkin bo'lgan tasvir yoki tildan foydalanishdan saqlaning.</li>
</ul>

<h2>Xulosa</h2>

<p>React'ning <code>useFormState</code> hook'i yoki unga taqlid qiluvchi forma kutubxonalari tomonidan taqdim etilgan xususiyatlar forma holatini boshqarish va validatsiyani soddalashtirish uchun kuchli vositadir. Forma holatini markazlashtirish, deklarativ validatsiya qoidalarini belgilash va foydalanuvchilarga real vaqtda fikr-mulohaza bildirish orqali <code>useFormState</code> sizga foydalanuvchi tajribasi va ma'lumotlar yaxlitligini oshiradigan mustahkam, qulay va do'stona formalar yaratish imkonini beradi. Og'ir ishlarni siz uchun bajaradigan yaxshi tanilgan kutubxonadan foydalanishni jiddiy o'ylab ko'rishni unutmang.</p>

<p>Ushbu to'liq qo'llanmada keltirilgan ko'rsatmalar va eng yaxshi amaliyotlarga rioya qilish orqali siz React'da forma yaratish san'atini o'zlashtirishingiz va foydalanuvchilaringiz hamda dasturingiz ehtiyojlariga javob beradigan ajoyib formalar yaratishingiz mumkin.</p>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">forma validatsiyasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">holatni boshqarish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooklari</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">forma qulayligi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">foydalanuvchi tajribasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">veb-dasturlash</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">front-end dasturlash</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template><template id="P:47"></template></div><link rel="alternate" hrefLang="ja" href="https://mlog.uz/ja/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="React useFormState Validatsiyasi: Forma Holatini Boshqarishni Yaxshilash bo'yicha To'liq Qo'llanma"/><meta property="og:description" content="Mustahkam forma validatsiyasi va holatini boshqarish uchun React'ning useFormState hook'ini o'rganing. Haqiqiy misollar bilan qulay va tushunarli formalar yaratishni bilib oling."/><meta property="og:url" content="https://mlog.uz/uz/blog/React%20useFormState%20Validation%3A%20A%20Comprehensive%20Guide%20to%20Enhanced%20Form%20State%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="uz"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-01T09:00:48.613Z"/><meta property="article:modified_time" content="2025-09-01T09:00:48.613Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React"/><meta property="article:tag" content="useFormState"/><meta property="article:tag" content="forma validatsiyasi"/><meta property="article:tag" content="holatni boshqarish"/><meta property="article:tag" content="React hooklari"/><meta property="article:tag" content="forma qulayligi"/><meta property="article:tag" content="foydalanuvchi tajribasi"/><meta property="article:tag" content="veb-dasturlash"/><meta property="article:tag" content="front-end dasturlash"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="React useFormState Validatsiyasi: Forma Holatini Boshqarishni Yaxshilash bo'yicha To'liq Qo'llanma"/><meta name="twitter:description" content="Mustahkam forma validatsiyasi va holatini boshqarish uchun React'ning useFormState hook'ini o'rganing. Haqiqiy misollar bilan qulay va tushunarli formalar yaratishni bilib oling."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><div hidden id="S:47"></div><script>$RS("S:47","P:47")</script><script>$RC("B:0","S:0")</script></body></html>