Reacti useFormState'i valideerimine: põhjalik juhend täiustatud vormi olekuhalduseks

            
// Eeldab hüpoteetilist useFormState implementatsiooni või teeki nagu @mantine/form
import React from 'react';
import { useFormState } from './useFormState'; // Asenda tegeliku impordiga

function ContactForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      name: '',
      email: '',
      message: '',
    },
    validationRules: {
      name: (value) => (value ? null : 'Nimi on kohustuslik'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Vigane e-posti aadress'),
      message: (value) => (value ? null : 'Sõnum on kohustuslik'),
    },
    onSubmit: (values) => {
      console.log('Vorm esitatud:', values);
      // Lisa siia oma vormi esitamise loogika
    },
  });

  return (
    

      

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

        E-post:
        
        {errors.email && touched.email && {errors.email}}
      
      

        Sõnum:
                {errors.message && touched.message && <span className="error">{errors.message}</span>}
      </div>
      <button type="submit">Esita</button>
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEVlbGRhYiBo/HBvdGVldGlsaXN0IHVzZUZvcm1TdGF0ZSBpbXBsZW1lbnRhdHNpb29uaSB29WkgdGVla2kgbmFndSBAbWFudGluZS9mb3JtCmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7CmltcG9ydCB7IHVzZUZvcm1TdGF0ZSB9IGZyb20gJy4vdXNlRm9ybVN0YXRlJzsgLy8gQXNlbmRhIHRlZ2VsaWt1IGltcG9yZGlnYQoKZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyB2YWx1ZXMsIGVycm9ycywgdG91Y2hlZCwgaGFuZGxlQ2hhbmdlLCBoYW5kbGVTdWJtaXQgfSA9IHVzZUZvcm1TdGF0ZSh7CiAgICBpbml0aWFsVmFsdWVzOiB7CiAgICAgIG5hbWU6ICcnLAogICAgICBlbWFpbDogJycsCiAgICAgIG1lc3NhZ2U6ICcnLAogICAgfSwKICAgIHZhbGlkYXRpb25SdWxlczogewogICAgICBuYW1lOiAodmFsdWUpID0+ICh2YWx1ZSA/IG51bGwgOiAnTmltaSBvbiBrb2h1c3R1c2xpaycpLAogICAgICBlbWFpbDogKHZhbHVlKSA9PiAodmFsdWUgJiYgL15bXlxzQF0rQFteXHNAXStcLlteXHNAXSskLy50ZXN0KHZhbHVlKSA/IG51bGwgOiAnVmlnYW5lIGUtcG9zdGkgYWFkcmVzcycpLAogICAgICBtZXNzYWdlOiAodmFsdWUpID0+ICh2YWx1ZSA/IG51bGwgOiAnU/VudW0gb24ga29odXN0dXNsaWsnKSwKICAgIH0sCiAgICBvblN1Ym1pdDogKHZhbHVlcykgPT4gewogICAgICBjb25zb2xlLmxvZygnVm9ybSBlc2l0YXR1ZDonLCB2YWx1ZXMpOwogICAgICAvLyBMaXNhIHNpaWEgb21hIHZvcm1pIGVzaXRhbWlzZSBsb29naWthCiAgICB9LAogIH0pOwoKICByZXR1cm4gKAogICAgPGZvcm0gb25TdWJtaXQ9e2hhbmRsZVN1Ym1pdH0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5pbWk6PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgICBpZD0ibmFtZSIKICAgICAgICAgIG5hbWU9Im5hbWUiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLm5hbWV9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5uYW1lICYmIHRvdWNoZWQubmFtZSAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLm5hbWV9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj5FLXBvc3Q6PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9ImVtYWlsIgogICAgICAgICAgaWQ9ImVtYWlsIgogICAgICAgICAgbmFtZT0iZW1haWwiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLmVtYWlsfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMuZW1haWwgJiYgdG91Y2hlZC5lbWFpbCAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLmVtYWlsfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJtZXNzYWdlIj5T9W51bTo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYQogICAgICAgICAgaWQ9Im1lc3NhZ2UiCiAgICAgICAgICBuYW1lPSJtZXNzYWdlIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5tZXNzYWdlfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMubWVzc2FnZSAmJiB0b3VjaGVkLm1lc3NhZ2UgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5tZXNzYWdlfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+RXNpdGE8L2J1dHRvbj4KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Selgitus:</b></p>
<ul>
  <li>Initsialiseerime <code>useFormState</code>'i vormi väljade algväärtuste ja valideerimisreeglitega.</li>
  <li><code>handleChange</code> funktsioon uuendab vormi olekut iga kord, kui sisendväli muutub.</li>
  <li><code>handleSubmit</code> funktsioon kutsutakse välja vormi esitamisel. See kontrollib enne andmete esitamist valideerimisvigade olemasolu.</li>
  <li>Veateated kuvatakse vastavate sisendväljade kõrval, kui esineb valideerimisvigu ja väli on puudutatud (touched/blurred).</li>
</ul>

<h3>Näide 2: Registreerimisvorm parooli kinnitusega</h3>

<p>See näide demonstreerib registreerimisvormi kasutajanime, e-posti, parooli ja parooli kinnituse väljadega. Rakendame valideerimise, et tagada kõigi väljade täitmine, e-posti aadressi kehtivus, parooli vastavus teatud kriteeriumidele (nt minimaalne pikkus) ja parooli kinnituse vastavus paroolile.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Eeldab hüpoteetilist useFormState implementatsiooni või teeki nagu @mantine/form
import React from 'react';
import { useFormState } from './useFormState'; // Asenda tegeliku impordiga

function RegistrationForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      username: '',
      email: '',
      password: '',
      passwordConfirmation: '',
    },
    validationRules: {
      username: (value) => (value ? null : 'Kasutajanimi on kohustuslik'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Vigane e-posti aadress'),
      password: (value) => (value && value.length >= 8 ? null : 'Parool peab olema vähemalt 8 tähemärki pikk'),
      passwordConfirmation: (value) =>
        value === values.password ? null : 'Parooli kinnitus ei kattu parooliga',
    },
    onSubmit: (values) => {
      console.log('Vorm esitatud:', values);
      // Lisa siia oma vormi esitamise loogika
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Kasutajanimi:</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">E-post:</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">Parool:</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">Parooli kinnitus:</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">Registreeri</button>
    </form>
  );
}

export default RegistrationForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEVlbGRhYiBo/HBvdGVldGlsaXN0IHVzZUZvcm1TdGF0ZSBpbXBsZW1lbnRhdHNpb29uaSB29WkgdGVla2kgbmFndSBAbWFudGluZS9mb3JtCmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7CmltcG9ydCB7IHVzZUZvcm1TdGF0ZSB9IGZyb20gJy4vdXNlRm9ybVN0YXRlJzsgLy8gQXNlbmRhIHRlZ2VsaWt1IGltcG9yZGlnYQoKZnVuY3Rpb24gUmVnaXN0cmF0aW9uRm9ybSgpIHsKICBjb25zdCB7IHZhbHVlcywgZXJyb3JzLCB0b3VjaGVkLCBoYW5kbGVDaGFuZ2UsIGhhbmRsZVN1Ym1pdCB9ID0gdXNlRm9ybVN0YXRlKHsKICAgIGluaXRpYWxWYWx1ZXM6IHsKICAgICAgdXNlcm5hbWU6ICcnLAogICAgICBlbWFpbDogJycsCiAgICAgIHBhc3N3b3JkOiAnJywKICAgICAgcGFzc3dvcmRDb25maXJtYXRpb246ICcnLAogICAgfSwKICAgIHZhbGlkYXRpb25SdWxlczogewogICAgICB1c2VybmFtZTogKHZhbHVlKSA9PiAodmFsdWUgPyBudWxsIDogJ0thc3V0YWphbmltaSBvbiBrb2h1c3R1c2xpaycpLAogICAgICBlbWFpbDogKHZhbHVlKSA9PiAodmFsdWUgJiYgL15bXlxzQF0rQFteXHNAXStcLlteXHNAXSskLy50ZXN0KHZhbHVlKSA/IG51bGwgOiAnVmlnYW5lIGUtcG9zdGkgYWFkcmVzcycpLAogICAgICBwYXNzd29yZDogKHZhbHVlKSA9PiAodmFsdWUgJiYgdmFsdWUubGVuZ3RoID49IDggPyBudWxsIDogJ1Bhcm9vbCBwZWFiIG9sZW1hIHbkaGVtYWx0IDggdORoZW3kcmtpIHBpa2snKSwKICAgICAgcGFzc3dvcmRDb25maXJtYXRpb246ICh2YWx1ZSkgPT4KICAgICAgICB2YWx1ZSA9PT0gdmFsdWVzLnBhc3N3b3JkID8gbnVsbCA6ICdQYXJvb2xpIGtpbm5pdHVzIGVpIGthdHR1IHBhcm9vbGlnYScsCiAgICB9LAogICAgb25TdWJtaXQ6ICh2YWx1ZXMpID0+IHsKICAgICAgY29uc29sZS5sb2coJ1Zvcm0gZXNpdGF0dWQ6JywgdmFsdWVzKTsKICAgICAgLy8gTGlzYSBzaWlhIG9tYSB2b3JtaSBlc2l0YW1pc2UgbG9vZ2lrYQogICAgfSwKICB9KTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIG9uU3VibWl0PXtoYW5kbGVTdWJtaXR9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJ1c2VybmFtZSI+S2FzdXRhamFuaW1pOjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJ0ZXh0IgogICAgICAgICAgaWQ9InVzZXJuYW1lIgogICAgICAgICAgbmFtZT0idXNlcm5hbWUiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLnVzZXJuYW1lfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMudXNlcm5hbWUgJiYgdG91Y2hlZC51c2VybmFtZSAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLnVzZXJuYW1lfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RS1wb3N0OjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJlbWFpbCIKICAgICAgICAgIGlkPSJlbWFpbCIKICAgICAgICAgIG5hbWU9ImVtYWlsIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5lbWFpbH0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLmVtYWlsICYmIHRvdWNoZWQuZW1haWwgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5lbWFpbH08L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0icGFzc3dvcmQiPlBhcm9vbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0icGFzc3dvcmQiCiAgICAgICAgICBpZD0icGFzc3dvcmQiCiAgICAgICAgICBuYW1lPSJwYXNzd29yZCIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMucGFzc3dvcmR9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5wYXNzd29yZCAmJiB0b3VjaGVkLnBhc3N3b3JkICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMucGFzc3dvcmR9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9InBhc3N3b3JkQ29uZmlybWF0aW9uIj5QYXJvb2xpIGtpbm5pdHVzOjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJwYXNzd29yZCIKICAgICAgICAgIGlkPSJwYXNzd29yZENvbmZpcm1hdGlvbiIKICAgICAgICAgIG5hbWU9InBhc3N3b3JkQ29uZmlybWF0aW9uIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5wYXNzd29yZENvbmZpcm1hdGlvbn0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLnBhc3N3b3JkQ29uZmlybWF0aW9uICYmIHRvdWNoZWQucGFzc3dvcmRDb25maXJtYXRpb24gJiYgKAogICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5wYXNzd29yZENvbmZpcm1hdGlvbn08L3NwYW4+CiAgICAgICAgKX0KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5SZWdpc3RyZWVyaTwvYnV0dG9uPgogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IFJlZ2lzdHJhdGlvbkZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Selgitus:</b></p>
<ul>
  <li>Lisasime <code>passwordConfirmation</code> välja ja valideerimisreegli, et tagada selle vastavus <code>password</code> väljaga.</li>
  <li><code>passwordConfirmation</code> valideerimisreegel pääseb ligi <code>values</code> objektile, et võrrelda kahte paroolivälja.</li>
</ul>

<h3>Näide 3: Dünaamiline vorm massiiviväljadega</h3>

<p>See näide demonstreerib dünaamilist vormi, kus väljade arv võib dünaamiliselt muutuda. See on kasulik stsenaariumide puhul, nagu näiteks mitme oskuse või kogemuse lisamine profiilile. Kasutame massiivi dünaamiliste väljade väärtuste salvestamiseks ning pakume funktsioone väljade lisamiseks ja eemaldamiseks.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Eeldab hüpoteetilist useFormState implementatsiooni või teeki nagu @mantine/form
import React, { useState } from 'react';
import { useFormState } from './useFormState'; // Asenda tegeliku impordiga

function SkillsForm() {
  const [skills, setSkills] = useState(['']); // Algne oskuse väli

  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: skills, // Initsialiseeri oskuste hetkeseisuga
    },
    validationRules: {
      skills: (value) => {
        // Näidisvalideerimine: veendu, et iga oskus poleks tühi
        for (let i = 0; i < value.length; i++) {
          if (!value[i]) {
            return 'Kõik oskuste väljad on kohustuslikud'; // Tagasta üksainus veateade
          }
        }
        return null; // Viga puudub, kui kõik oskused on kehtivad
      },
    },
    onSubmit: (values) => {
      console.log('Vorm esitatud:', values);
      // Lisa siia oma vormi esitamise loogika
    },
  });

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

    // Uuenda vormi olekut käsitsi, kuna haldame massiivi väljaspool useFormState'i
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  const addSkill = () => {
    setSkills([...skills, '']);
    // Käivita käsitsi uuesti valideerimine 'skills' välja jaoks
    handleChange({ target: { name: 'skills', value: [...skills, ''] } });
  };

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

    // Käivita käsitsi uuesti valideerimine 'skills' välja jaoks
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Oskused:</label>
        {skills.map((skill, index) => (
          <div key={index}>
            <input
              type="text"
              value={skill}
              onChange={(event) => handleSkillChange(index, event)}
            />
            <button type="button" onClick={() => removeSkill(index)}>Eemalda</button>
          </div>
        ))}
        <button type="button" onClick={addSkill}>Lisa oskus</button>
        {errors.skills && touched.skills && <span className="error">{errors.skills}</span>}
      </div>
      <button type="submit">Esita</button>
    </form>
  );
}

export default SkillsForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEVlbGRhYiBo/HBvdGVldGlsaXN0IHVzZUZvcm1TdGF0ZSBpbXBsZW1lbnRhdHNpb29uaSB29WkgdGVla2kgbmFndSBAbWFudGluZS9mb3JtCmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBBc2VuZGEgdGVnZWxpa3UgaW1wb3JkaWdhCgpmdW5jdGlvbiBTa2lsbHNGb3JtKCkgewogIGNvbnN0IFtza2lsbHMsIHNldFNraWxsc10gPSB1c2VTdGF0ZShbJyddKTsgLy8gQWxnbmUgb3NrdXNlIHbkbGkKCiAgY29uc3QgeyB2YWx1ZXMsIGVycm9ycywgdG91Y2hlZCwgaGFuZGxlQ2hhbmdlLCBoYW5kbGVTdWJtaXQgfSA9IHVzZUZvcm1TdGF0ZSh7CiAgICBpbml0aWFsVmFsdWVzOiB7CiAgICAgIHNraWxsczogc2tpbGxzLCAvLyBJbml0c2lhbGlzZWVyaSBvc2t1c3RlIGhldGtlc2Vpc3VnYQogICAgfSwKICAgIHZhbGlkYXRpb25SdWxlczogewogICAgICBza2lsbHM6ICh2YWx1ZSkgPT4gewogICAgICAgIC8vIE7kaWRpc3ZhbGlkZWVyaW1pbmU6IHZlZW5kdSwgZXQgaWdhIG9za3VzIHBvbGVrcyB0/GhpCiAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCB2YWx1ZS5sZW5ndGg7IGkrKykgewogICAgICAgICAgaWYgKCF2YWx1ZVtpXSkgewogICAgICAgICAgICByZXR1cm4gJ0v1aWsgb3NrdXN0ZSB25GxqYWQgb24ga29odXN0dXNsaWt1ZCc7IC8vIFRhZ2FzdGEg/GtzYWludXMgdmVhdGVhZGUKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgcmV0dXJuIG51bGw7IC8vIFZpZ2EgcHV1ZHViLCBrdWkga/VpayBvc2t1c2VkIG9uIGtlaHRpdmFkCiAgICAgIH0sCiAgICB9LAogICAgb25TdWJtaXQ6ICh2YWx1ZXMpID0+IHsKICAgICAgY29uc29sZS5sb2coJ1Zvcm0gZXNpdGF0dWQ6JywgdmFsdWVzKTsKICAgICAgLy8gTGlzYSBzaWlhIG9tYSB2b3JtaSBlc2l0YW1pc2UgbG9vZ2lrYQogICAgfSwKICB9KTsKCiAgY29uc3QgaGFuZGxlU2tpbGxDaGFuZ2UgPSAoaW5kZXgsIGV2ZW50KSA9PiB7CiAgICBjb25zdCBuZXdTa2lsbHMgPSBbLi4uc2tpbGxzXTsKICAgIG5ld1NraWxsc1tpbmRleF0gPSBldmVudC50YXJnZXQudmFsdWU7CiAgICBzZXRTa2lsbHMobmV3U2tpbGxzKTsKCiAgICAvLyBVdWVuZGEgdm9ybWkgb2xla3V0IGvkc2l0c2ksIGt1bmEgaGFsZGFtZSBtYXNzaWl2aSB25GxqYXNwb29sIHVzZUZvcm1TdGF0ZSdpCiAgICBoYW5kbGVDaGFuZ2UoeyB0YXJnZXQ6IHsgbmFtZTogJ3NraWxscycsIHZhbHVlOiBuZXdTa2lsbHMgfSB9KTsKICB9OwoKICBjb25zdCBhZGRTa2lsbCA9ICgpID0+IHsKICAgIHNldFNraWxscyhbLi4uc2tpbGxzLCAnJ10pOwogICAgLy8gS+Rpdml0YSBr5HNpdHNpIHV1ZXN0aSB2YWxpZGVlcmltaW5lICdza2lsbHMnIHbkbGphIGphb2tzCiAgICBoYW5kbGVDaGFuZ2UoeyB0YXJnZXQ6IHsgbmFtZTogJ3NraWxscycsIHZhbHVlOiBbLi4uc2tpbGxzLCAnJ10gfSB9KTsKICB9OwoKICBjb25zdCByZW1vdmVTa2lsbCA9IChpbmRleCkgPT4gewogICAgY29uc3QgbmV3U2tpbGxzID0gWy4uLnNraWxsc107CiAgICBuZXdTa2lsbHMuc3BsaWNlKGluZGV4LCAxKTsKICAgIHNldFNraWxscyhuZXdTa2lsbHMpOwoKICAgIC8vIEvkaXZpdGEga+RzaXRzaSB1dWVzdGkgdmFsaWRlZXJpbWluZSAnc2tpbGxzJyB25GxqYSBqYW9rcwogICAgaGFuZGxlQ2hhbmdlKHsgdGFyZ2V0OiB7IG5hbWU6ICdza2lsbHMnLCB2YWx1ZTogbmV3U2tpbGxzIH0gfSk7CiAgfTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIG9uU3VibWl0PXtoYW5kbGVTdWJtaXR9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbD5Pc2t1c2VkOjwvbGFiZWw+CiAgICAgICAge3NraWxscy5tYXAoKHNraWxsLCBpbmRleCkgPT4gKAogICAgICAgICAgPGRpdiBrZXk9e2luZGV4fT4KICAgICAgICAgICAgPGlucHV0CiAgICAgICAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICAgICAgICB2YWx1ZT17c2tpbGx9CiAgICAgICAgICAgICAgb25DaGFuZ2U9eyhldmVudCkgPT4gaGFuZGxlU2tpbGxDaGFuZ2UoaW5kZXgsIGV2ZW50KX0KICAgICAgICAgICAgLz4KICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIG9uQ2xpY2s9eygpID0+IHJlbW92ZVNraWxsKGluZGV4KX0+RWVtYWxkYTwvYnV0dG9uPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgKSl9CiAgICAgICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIG9uQ2xpY2s9e2FkZFNraWxsfT5MaXNhIG9za3VzPC9idXR0b24+CiAgICAgICAge2Vycm9ycy5za2lsbHMgJiYgdG91Y2hlZC5za2lsbHMgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5za2lsbHN9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5Fc2l0YTwvYnV0dG9uPgogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IFNraWxsc0Zvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Selgitus:</b></p>
<ul>
  <li>See näide nõuab dünaamilise massiivi jaoks veidi rohkem käsitsi olekuhaldust.</li>
  <li>Kasutame <code>useState</code> hook'i oskuste massiivi haldamiseks.</li>
  <li>Funktsioonid <code>handleSkillChange</code>, <code>addSkill</code> ja <code>removeSkill</code> uuendavad massiivi ja käivitavad käsitsi <code>useFormState</code>'i funktsiooni <code>handleChange</code>, et hoida vormi olek sünkroonis. See on vajalik, kuna teek käsitleb sageli *objekti* omadusi, kuid mitte tingimata tipptaseme massiivi mutatsioone.</li>
  <li>Oskuste valideerimisreegel kontrollib, kas kõik oskused pole tühjad.</li>
</ul>

<h2>Täpsemad valideerimistehnikad</h2>

<p>Lisaks põhilisele nõutud väljade valideerimisele saate andmete terviklikkuse tagamiseks ja kasutajakogemuse parandamiseks rakendada täpsemaid valideerimistehnikaid. Siin on mõned näited:</p>

<ul>
  <li><b>Regulaaravaldised:</b> kasutage regulaaravaldisi e-posti aadresside, telefoninumbrite ja muude andmevormingute valideerimiseks.</li>
  <li><b>Kohandatud valideerimisfunktsioonid:</b> looge kohandatud valideerimisfunktsioone keeruka valideerimisloogika rakendamiseks, näiteks unikaalsete kasutajanimede kontrollimiseks või parooli tugevuse kontrollimiseks.</li>
  <li><b>Asünkroonne valideerimine:</b> teostage asünkroonne valideerimine, näiteks kontrollides enne vormi esitamist serverist, kas kasutajanimi on saadaval. Seda toetavad tavaliselt teegid nagu <code>react-hook-form</code>.</li>
  <li><b>Tingimuslik valideerimine:</b> rakendage valideerimisreegleid vormi teiste väljade väärtuste põhjal. Näiteks võite nõuda telefoninumbrit ainult siis, kui kasutaja valib teatud riigi.</li>
  <li><b>Kolmandate osapoolte valideerimisteegid:</b> integreerige kolmandate osapoolte valideerimisteekidega, nagu Yup või Zod, et määratleda valideerimisskeeme ja lihtsustada valideerimisloogikat. Need teegid pakuvad sageli täpsemaid funktsioone, nagu andmete teisendamine ja sundimine (coercion).</li>
</ul>

<h2>Ligipääsetavuse kaalutlused</h2>

<p>Ligipääsetavus on vormiarenduse oluline aspekt. Veenduge, et teie vormid oleksid puuetega kasutajatele ligipääsetavad, järgides neid juhiseid:</p>

<ul>
  <li><b>Pakkuge selgeid ja lühidaid silte (labels):</b> kasutage kõigi sisendväljade jaoks kirjeldavaid silte nende eesmärgi selgitamiseks.</li>
  <li><b>Kasutage semantilist HTML-i:</b> kasutage vormide struktureerimiseks semantilisi HTML-elemente, nagu <code><label></code>, <code><input></code> ja <code><textarea></code>.</li>
  <li><b>Pakkuge veateateid:</b> kuvage selgeid ja lühidaid veateateid, et teavitada kasutajaid kehtetutest sisenditest.</li>
  <li><b>Seostage sildid sisenditega:</b> kasutage <code>for</code> atribuuti <code><label></code> elementidel, et seostada need vastavate sisendväljadega.</li>
  <li><b>Kasutage ARIA atribuute:</b> kasutage ARIA atribuute, nagu <code>aria-describedby</code> ja <code>aria-invalid</code>, et pakkuda lisateavet abitehnoloogiatele.</li>
  <li><b>Tagage klaviatuuri ligipääsetavus:</b> veenduge, et kõik vormielemendid oleksid klaviatuuri abil ligipääsetavad.</li>
  <li><b>Testige abitehnoloogiatega:</b> testige oma vorme abitehnoloogiatega, näiteks ekraanilugejatega, et tagada nende ligipääsetavus puuetega kasutajatele.</li>
</ul>

<h2>useFormState'i parimad praktikad</h2>

<p>Siin on mõned parimad praktikad, mida <code>useFormState</code>'i kasutamisel järgida:</p>

<ul>
  <li><b>Hoidke valideerimisreeglid lühikesed:</b> määratlege valideerimisreeglid selgelt ja lühidalt.</li>
  <li><b>Pakkuge kasutajasõbralikke veateateid:</b> kuvage veateateid, mis on kergesti mõistetavad ja pakuvad kasutajatele kasulikke juhiseid.</li>
  <li><b>Testige oma vorme põhjalikult:</b> testige oma vorme erinevate sisendväärtuste ja stsenaariumidega, et tagada nende korrektne toimimine ja vigade sujuv käsitlemine.</li>
  <li><b>Arvestage jõudluse mõjudega:</b> olge teadlik keerukate valideerimisreeglite ja asünkroonse valideerimise jõudluse mõjudest.</li>
  <li><b>Kasutage vormiteeki:</b> kaaluge tõsiselt tuntud vormiteegi (nagu <code>@mantine/form</code> või <code>react-hook-form</code>) kasutamist, kuna need pakuvad robustseid funktsioone, jõudluse optimeerimisi ja ligipääsetavuse täiustusi kohe karbist võttes. Ärge leiutage jalgratast uuesti!</li>
</ul>

<h2>Globaalsed kaalutlused vormide disainimisel</h2>

<p>Globaalsele sihtrühmale vormide kujundamisel on ülioluline arvestada kultuuriliste erinevuste ja lokaliseerimisnõuetega. Siin on mõned peamised kaalutlused:</p>

<ul>
  <li><b>Aadressivormingud:</b> aadressivormingud varieeruvad riigiti märkimisväärselt. Pakkuge paindlikke aadressivälju, mis mahutavad erinevaid aadressistruktuure. Kaaluge riigivalija kasutamist, et aadressiväljad automaatselt valitud riigi põhjal kohandada.</li>
  <li><b>Telefoninumbrite vormingud:</b> telefoninumbrite vormingud varieeruvad samuti riigiti. Pakkuge riigikoodi valijat ja lubage kasutajatel sisestada telefoninumbreid oma kohalikus vormingus.</li>
  <li><b>Kuupäevavormingud:</b> kuupäevavormingud erinevad riigiti. Kasutage kuupäevavalijat, mis toetab erinevaid kuupäevavorminguid, või lubage kasutajatel valida eelistatud kuupäevavorming. Näiteks kasutab USA tavaliselt KK/PP/AAAA, samas kui Euroopa kasutab sageli PP/KK/AAAA.</li>
  <li><b>Valuutavormingud:</b> valuutavormingud varieeruvad riigiti. Kuvage valuutasümboleid ja -vorminguid vastavalt kasutaja lokaadile.</li>
  <li><b>Nime järjekord:</b> nimede järjekord varieerub kultuuriti. Mõned kultuurid kasutavad eesnime esimesena, teised aga perekonnanime esimesena. Pakkuge eraldi väljad ees- ja perekonnanime jaoks või lubage kasutajatel määrata oma eelistatud nimejärjekord.</li>
  <li><b>Keeletugi:</b> veenduge, et teie vormid oleksid saadaval mitmes keeles, et teenindada globaalset sihtrühma. Kasutage lokaliseerimisteeki vormi siltide, veateadete ja muu teksti tõlkimiseks.</li>
  <li><b>Kultuuriline tundlikkus:</b> olge vormide kujundamisel teadlik kultuurilisest tundlikkusest. Vältige piltide või keelekasutust, mis võib teatud kultuuridele solvav olla.</li>
</ul>

<h2>Kokkuvõte</h2>

<p>Reacti <code>useFormState</code> hook või seda jäljendavate vormiteekide pakutavad funktsioonid on võimas tööriist vormi olekuhalduse ja valideerimise lihtsustamiseks. Tsentraliseerides vormi oleku, määratledes deklaratiivsed valideerimisreeglid ja pakkudes kasutajatele reaalajas tagasisidet, võimaldab <code>useFormState</code> teil luua robustseid, ligipääsetavaid ja kasutajasõbralikke vorme, mis parandavad kasutajakogemust ja andmete terviklikkust. Ärge unustage tõsiselt kaaluda tuntud teegi kasutamist, mis teeb teie eest ära raske töö.</p>

<p>Järgides selles põhjalikus juhendis toodud juhiseid ja parimaid praktikaid, saate omandada Reactis vormiarenduse kunsti ja luua erakordseid vorme, mis vastavad nii teie kasutajate kui ka teie rakenduse vajadustele.</p></div><template id="P:4"></template></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><div hidden id="S:4"><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">vormi valideerimine</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">olekuhaldus</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">Reacti hook'id</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">vormi ligipääsetavus</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">kasutajakogemus</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">veebiarendus</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">esiotsa arendus</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>