{"id":30406,"date":"2025-09-27T11:41:20","date_gmt":"2025-09-27T08:41:20","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30406"},"modified":"2025-09-27T11:41:20","modified_gmt":"2025-09-27T08:41:20","slug":"react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/","title":{"rendered":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<p><body><\/p>\n<h2>React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber<\/h2>\n<h3>Giri\u015f<\/h3>\n<p>Web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan formlar, kullan\u0131c\u0131 etkile\u015fiminin ve veri toplaman\u0131n merkezinde yer al\u0131r. Kay\u0131t i\u015flemleri, giri\u015f sayfalar\u0131, ileti\u015fim formlar\u0131, \u00f6deme ekranlar\u0131 gibi bir\u00e7ok senaryoda kullan\u0131c\u0131dan bilgi giri\u015fi talep edilir. Ancak, kullan\u0131c\u0131dan al\u0131nan verinin do\u011frulu\u011fu ve b\u00fct\u00fcnl\u00fc\u011f\u00fc, uygulaman\u0131n g\u00fcvenilirli\u011fi ve i\u015flevselli\u011fi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Yanl\u0131\u015f veya eksik veri giri\u015fi, uygulaman\u0131n hatal\u0131 \u00e7al\u0131\u015fmas\u0131na, g\u00fcvenlik a\u00e7\u0131klar\u0131na veya k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7abilir. \u0130\u015fte bu noktada form do\u011frulama (form validation) devreye girer.<\/p>\n<p>Form do\u011frulama, kullan\u0131c\u0131 taraf\u0131ndan girilen verilerin belirli kurallara uygun olup olmad\u0131\u011f\u0131n\u0131 kontrol etme s\u00fcrecidir. Bu kurallar, bir alan\u0131n bo\u015f b\u0131rak\u0131l\u0131p b\u0131rak\u0131lamayaca\u011f\u0131, bir e-posta adresinin do\u011fru formatta olup olmad\u0131\u011f\u0131, bir \u015fifrenin minimum uzunlukta olup olmad\u0131\u011f\u0131 gibi \u00e7e\u015fitli kontrolleri i\u00e7erebilir. React gibi modern JavaScript k\u00fct\u00fcphaneleriyle geli\u015ftirilen uygulamalarda, form do\u011frulama s\u00fcreci hem istemci taraf\u0131nda (client-side) hem de sunucu taraf\u0131nda (server-side) ele al\u0131nabilir. \u0130stemci taraf\u0131 do\u011frulama, kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flayarak hatalar\u0131 d\u00fczeltme f\u0131rsat\u0131 verir ve sunucuya gereksiz istek g\u00f6nderimini azalt\u0131r. Sunucu taraf\u0131 do\u011frulama ise g\u00fcvenlik ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fc a\u00e7\u0131s\u0131ndan son kontrol katman\u0131n\u0131 olu\u015fturur.<\/p>\n<p>React ekosisteminde form do\u011frulama i\u00e7in bir\u00e7ok farkl\u0131 yakla\u015f\u0131m ve k\u00fct\u00fcphane bulunmaktad\u0131r. <code>Formik<\/code>, <code>React Hook Form<\/code>, <code>Yup<\/code> gibi pop\u00fcler se\u00e7enekler, karma\u015f\u0131k formlar\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Ancak, bazen daha hafif, daha odaklanm\u0131\u015f ve esnek bir \u00e7\u00f6z\u00fcme ihtiya\u00e7 duyulabilir. \u0130\u015fte tam da bu noktada <code>calidation<\/code> sahneye \u00e7\u0131k\u0131yor. <code>calidation<\/code>, \u00f6zellikle basit ve orta d\u00fczeydeki form do\u011frulama ihtiya\u00e7lar\u0131 i\u00e7in tasarlanm\u0131\u015f, kullan\u0131m\u0131 kolay, hafif ve mod\u00fcler bir JavaScript do\u011frulama k\u00fct\u00fcphanesidir. Bu makalede, <code>calidation<\/code>&#8216;\u0131n React uygulamalar\u0131nda nas\u0131l &#8220;k\u0131zg\u0131n&#8221; (red hot) bir do\u011frulama deneyimi sunabilece\u011fini, kurulumundan geli\u015fmi\u015f kullan\u0131m senaryolar\u0131na kadar t\u00fcm detaylar\u0131yla inceleyece\u011fiz.<\/p>\n<h3>calidation Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h3>\n<p><code>calidation<\/code>, JavaScript i\u00e7in tasarlanm\u0131\u015f, kural tabanl\u0131 bir do\u011frulama k\u00fct\u00fcphanesidir. Temel amac\u0131, veri do\u011frulamay\u0131 basit ve anla\u015f\u0131l\u0131r bir \u015fekilde ger\u00e7ekle\u015ftirmektir. Di\u011fer baz\u0131 kapsaml\u0131 form y\u00f6netim k\u00fct\u00fcphanelerinin aksine, <code>calidation<\/code> yaln\u0131zca do\u011frulama i\u015flevine odaklan\u0131r. Bu odaklanma, k\u00fct\u00fcphanenin hafif kalmas\u0131n\u0131, \u00f6\u011frenme e\u011frisinin d\u00fc\u015f\u00fck olmas\u0131n\u0131 ve mevcut React form yap\u0131lar\u0131yla kolayca entegre olabilmesini sa\u011flar.<\/p>\n<h4>calidation&#8217;\u0131n Temel \u00d6zellikleri<\/h4>\n<p>*   <strong>Kural Tabanl\u0131 Do\u011frulama:<\/strong> Do\u011frulama kurallar\u0131 (\u00f6rn. <code>required<\/code>, <code>email<\/code>, <code>minLength<\/code>) tan\u0131mlayarak \u00e7al\u0131\u015f\u0131r. Bu kurallar, do\u011frulanacak verinin niteliklerini belirler.<br \/>\n*   <strong>\u00d6zelle\u015ftirilebilir Hata Mesajlar\u0131:<\/strong> Her kural i\u00e7in \u00f6zel hata mesajlar\u0131 tan\u0131mlayabilme yetene\u011fi, kullan\u0131c\u0131ya daha anlaml\u0131 geri bildirimler sunar.<br \/>\n*   <strong>Asenkron Do\u011frulama Deste\u011fi:<\/strong> Sunucu taraf\u0131 kontrolleri veya API \u00e7a\u011fr\u0131lar\u0131 gerektiren durumlar i\u00e7in asenkron do\u011frulama yapabilir.<br \/>\n*   <strong>Ko\u015fullu Do\u011frulama:<\/strong> Belirli ko\u015fullar alt\u0131nda belirli alanlar\u0131n do\u011frulanmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir onay kutusu i\u015faretliyse ek bir alan\u0131n zorunlu olmas\u0131.<br \/>\n*   <strong>Ba\u011f\u0131ml\u0131 Alan Do\u011frulama:<\/strong> Bir alan\u0131n do\u011frulu\u011funun ba\u015fka bir alan\u0131n de\u011ferine ba\u011fl\u0131 oldu\u011fu senaryolar\u0131 destekler (\u00f6rn. &#8220;\u015fifre tekrar\u0131&#8221; alan\u0131n\u0131n &#8220;\u015fifre&#8221; alan\u0131 ile e\u015fle\u015fmesi).<br \/>\n*   <strong>Hafif ve Mod\u00fcler:<\/strong> Minimal ba\u011f\u0131ml\u0131l\u0131klara sahip olmas\u0131 ve sadece do\u011frulama i\u015fine odaklanmas\u0131 sayesinde projenize gereksiz y\u00fck getirmez.<br \/>\n*   <strong>React Dostu:<\/strong> React&#8217;in state y\u00f6netimi ve component yap\u0131s\u0131 ile sorunsuz bir \u015fekilde entegre edilebilir.<\/p>\n<h4>Neden calidation Kullanmal\u0131y\u0131z?<\/h4>\n<p>1.  <strong>Basitlik ve H\u0131z:<\/strong> Karma\u015f\u0131k form y\u00f6netim mant\u0131\u011f\u0131na ihtiya\u00e7 duymad\u0131\u011f\u0131n\u0131z, sadece h\u0131zl\u0131 ve etkili bir do\u011frulama arad\u0131\u011f\u0131n\u0131z durumlarda <code>calidation<\/code> idealdir. \u00d6\u011frenmesi ve uygulamas\u0131 olduk\u00e7a kolayd\u0131r.<br \/>\n2.  <strong>Esneklik:<\/strong> Mevcut form yap\u0131n\u0131zdan \u00f6d\u00fcn vermeden, React&#8217;in <code>useState<\/code> veya <code>useReducer<\/code> gibi yerle\u015fik hook&#8217;lar\u0131 ile kolayca entegre edilebilir. K\u00fct\u00fcphanenin form y\u00f6netimi \u00fczerinde dayatmac\u0131 bir yap\u0131s\u0131 yoktur.<br \/>\n3.  <strong>Performans:<\/strong> Hafif yap\u0131s\u0131 sayesinde uygulaman\u0131z\u0131n bundle boyutunu art\u0131rmaz ve do\u011frulama i\u015flemlerini h\u0131zl\u0131 bir \u015fekilde ger\u00e7ekle\u015ftirir.<br \/>\n4.  <strong>Kontrol:<\/strong> Do\u011frulama kurallar\u0131n\u0131 ve hata mesajlar\u0131n\u0131 tam kontrol alt\u0131nda tutman\u0131z\u0131 sa\u011flar. Bu, \u00f6zellikle \u00f6zel i\u015f mant\u0131klar\u0131 veya \u00e7ok dilli uygulamalar geli\u015ftirirken \u00f6nemlidir.<br \/>\n5.  <strong>\u00d6zelle\u015ftirilebilirlik:<\/strong> Kendi \u00f6zel do\u011frulama kurallar\u0131n\u0131z\u0131 tan\u0131mlayarak <code>calidation<\/code>&#8216;\u0131n yeteneklerini projenizin \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re geni\u015fletebilirsiniz.<\/p>\n<p>Di\u011fer k\u00fct\u00fcphanelerle kar\u015f\u0131la\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, <code>calidation<\/code> daha \u00e7ok <code>Yup<\/code> gibi bir \u015fema do\u011frulama k\u00fct\u00fcphanesine benzer ancak kendi form y\u00f6netimini getirmemesiyle ayr\u0131l\u0131r. E\u011fer <code>React Hook Form<\/code> veya <code>Formik<\/code> gibi k\u00fct\u00fcphanelerin sundu\u011fu t\u00fcm form y\u00f6netimi \u00f6zelliklerine (kay\u0131t, odaklama, resetleme vb.) ihtiyac\u0131n\u0131z yoksa ve sadece g\u00fc\u00e7l\u00fc bir do\u011frulama motoru ar\u0131yorsan\u0131z, <code>calidation<\/code> m\u00fckemmel bir se\u00e7im olabilir.<\/p>\n<h3>calidation ile Temel Form Do\u011frulamas\u0131<\/h3>\n<p><code>calidation<\/code> ile React uygulaman\u0131zda form do\u011frulamas\u0131 yapmak olduk\u00e7a basittir. Ad\u0131m ad\u0131m kurulumdan ba\u015flayarak temel do\u011frulama kurallar\u0131n\u0131n nas\u0131l uygulanaca\u011f\u0131n\u0131 g\u00f6relim.<\/p>\n<h4>Kurulum<\/h4>\n<p>\u0130lk ad\u0131m, <code>calidation<\/code> k\u00fct\u00fcphanesini projenize eklemektir. Bunu npm veya yarn kullanarak yapabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">npm install calidation\n<h2>veya<\/h2>\nyarn add calidation<\/code><\/pre>\n<h4>Basit Bir Form \u00d6rne\u011fi<\/h4>\n<p>\u015eimdi, bir kullan\u0131c\u0131 kay\u0131t formu d\u00fc\u015f\u00fcnelim. Bu formda bir e-posta, bir kullan\u0131c\u0131 ad\u0131 ve bir \u015fifre alan\u0131 olsun.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\nimport { Validator } from 'calidation';\n\n\/\/ Do\u011frulama \u015femam\u0131z\u0131 tan\u0131ml\u0131yoruz\nconst registerValidator = new Validator({\n  email: {\n    rule: 'email',\n    message: 'L\u00fctfen ge\u00e7erli bir e-posta adresi girin.',\n  },\n  username: {\n    rule: 'minLength:3',\n    message: 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131.',\n  },\n  password: {\n    rule: 'minLength:6',\n    message: '\u015eifreniz en az 6 karakter olmal\u0131.',\n  },\n});\n\nfunction RegisterForm() {\n  const [formData, setFormData] = useState({\n    email: '',\n    username: '',\n    password: '',\n  });\n  const [errors, setErrors] = useState({});\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const handleChange = (e) => {\n    const { name, value } = e.target;\n    setFormData((prevData) => ({ ...prevData, [name]: value }));\n\n    \/\/ Alan de\u011fi\u015fti\u011finde an\u0131nda do\u011frulama yapabiliriz\n    const validationResult = registerValidator.validate({ ...formData, [name]: value });\n    setErrors(validationResult.errors);\n  };\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n\n    const validationResult = registerValidator.validate(formData);\n\n    if (validationResult.isValid) {\n      console.log('Form ge\u00e7erli, g\u00f6nderiliyor:', formData);\n      \/\/ Burada formu sunucuya g\u00f6nderme veya ba\u015fka bir i\u015flem yapabilirsiniz\n      await new Promise(resolve => setTimeout(resolve, 1000)); \/\/ Sim\u00fcle edilmi\u015f API \u00e7a\u011fr\u0131s\u0131\n      alert('Kay\u0131t ba\u015far\u0131l\u0131!');\n      setFormData({ email: '', username: '', password: '' }); \/\/ Formu s\u0131f\u0131rla\n      setErrors({});\n    } else {\n      console.log('Form hatal\u0131:', validationResult.errors);\n      setErrors(validationResult.errors);\n    }\n    setIsSubmitting(false);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"p-4 border rounded shadow-sm\">\n      <h3 className=\"text-xl font-bold mb-4\">Yeni Hesap Olu\u015ftur<\/h3>\n\n      <div className=\"mb-3\">\n        <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\">E-posta:<\/label>\n        <input\n          type=\"email\"\n          id=\"email\"\n          name=\"email\"\n          value={formData.email}\n          onChange={handleChange}\n          className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2\"\n        \/>\n        {errors.email && <p className=\"text-red-500 text-sm mt-1\">{errors.email}<\/p>}\n      <\/div>\n\n      <div className=\"mb-3\">\n        <label htmlFor=\"username\" className=\"block text-sm font-medium text-gray-700\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n        <input\n          type=\"text\"\n          id=\"username\"\n          name=\"username\"\n          value={formData.username}\n          onChange={handleChange}\n          className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2\"\n        \/>\n        {errors.username && <p className=\"text-red-500 text-sm mt-1\">{errors.username}<\/p>}\n      <\/div>\n\n      <div className=\"mb-4\">\n        <label htmlFor=\"password\" className=\"block text-sm font-medium text-gray-700\">\u015eifre:<\/label>\n        <input\n          type=\"password\"\n          id=\"password\"\n          name=\"password\"\n          value={formData.password}\n          onChange={handleChange}\n          className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2\"\n        \/>\n        {errors.password && <p className=\"text-red-500 text-sm mt-1\">{errors.password}<\/p>}\n      <\/div>\n\n      <button\n        type=\"submit\"\n        disabled={isSubmitting}\n        className=\"w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 disabled:opacity-50\"\n      >\n        {isSubmitting ? 'G\u00f6nderiliyor...' : 'Kaydol'}\n      <\/button>\n    <\/form>\n  );\n}\n\nexport default RegisterForm;<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>calidation<\/code>&#8216;\u0131 React&#8217;in <code>useState<\/code> hook&#8217;u ile nas\u0131l entegre etti\u011fimizi g\u00f6r\u00fcyorsunuz.<\/p>\n<p>1.  <strong><code>Validator<\/code> Tan\u0131mlama:<\/strong> \u0130lk olarak, <code>new Validator()<\/code> ile bir do\u011frulay\u0131c\u0131 \u00f6rne\u011fi olu\u015fturuyoruz. Bu \u00f6rne\u011fe, her form alan\u0131 i\u00e7in bir kural nesnesi i\u00e7eren bir konfig\u00fcrasyon objesi iletiyoruz.<br \/>\n2.  <strong>Do\u011frulama Kurallar\u0131:<\/strong><br \/>\n    *   <code>email: { rule: 'email', message: '...' }<\/code>: <code>email<\/code> kural\u0131, alan\u0131n ge\u00e7erli bir e-posta format\u0131nda olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<br \/>\n    *   <code>username: { rule: 'minLength:3', message: '...' }<\/code>: <code>minLength:3<\/code> kural\u0131, alan\u0131n de\u011ferinin en az 3 karakter uzunlu\u011funda olmas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>password: { rule: 'minLength:6', message: '...' }<\/code>: <code>minLength:6<\/code> kural\u0131, \u015fifrenin en az 6 karakter uzunlu\u011funda olmas\u0131n\u0131 gerektirir.<br \/>\n3.  <strong>Form Durumu Y\u00f6netimi:<\/strong> <code>formData<\/code> state&#8217;i, formdaki t\u00fcm alanlar\u0131n de\u011ferlerini tutar. <code>errors<\/code> state&#8217;i ise do\u011frulama sonucunda olu\u015fan hatalar\u0131 saklar.<br \/>\n4.  <strong><code>handleChange<\/code> Fonksiyonu:<\/strong> Bir input alan\u0131 de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r. <code>formData<\/code>&#8216;y\u0131 g\u00fcnceller ve iste\u011fe ba\u011fl\u0131 olarak an\u0131nda do\u011frulama yaparak <code>errors<\/code> state&#8217;ini g\u00fcnceller. Bu, kullan\u0131c\u0131ya yazarken an\u0131nda geri bildirim sa\u011flar.<br \/>\n5.  <strong><code>handleSubmit<\/code> Fonksiyonu:<\/strong> Form g\u00f6nderildi\u011finde \u00e7a\u011fr\u0131l\u0131r. <code>registerValidator.validate(formData)<\/code> metodu ile t\u00fcm form verilerini do\u011frular.<br \/>\n    *   <code>validationResult.isValid<\/code>: T\u00fcm alanlar ge\u00e7erliyse <code>true<\/code>, aksi takdirde <code>false<\/code> d\u00f6ner.<br \/>\n    *   <code>validationResult.errors<\/code>: Ge\u00e7ersiz alanlar i\u00e7in hata mesajlar\u0131n\u0131 i\u00e7eren bir objedir.<br \/>\n6.  <strong>Hata Mesajlar\u0131n\u0131 G\u00f6sterme:<\/strong> Her input alan\u0131n\u0131n alt\u0131nda, ilgili alana ait bir hata mesaj\u0131 varsa (<code>errors.email<\/code>, <code>errors.username<\/code> vb.) bu mesaj\u0131 g\u00f6steriyoruz.<\/p>\n<p>Bu temel yap\u0131, <code>calidation<\/code> ile form do\u011frulamas\u0131 yapman\u0131n ana ak\u0131\u015f\u0131n\u0131 olu\u015fturur. <code>calidation<\/code>, <code>required<\/code>, <code>maxLength<\/code>, <code>numeric<\/code>, <code>alpha<\/code>, <code>alphaNumeric<\/code>, <code>url<\/code>, <code>date<\/code>, <code>json<\/code>, <code>regex<\/code> gibi bir\u00e7ok yerle\u015fik kural\u0131 destekler.<\/p>\n<h3>Geli\u015fmi\u015f Do\u011frulama Senaryolar\u0131<\/h3>\n<p><code>calidation<\/code>, sadece temel kurallarla s\u0131n\u0131rl\u0131 kalmaz; daha karma\u015f\u0131k do\u011frulama ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamak i\u00e7in g\u00fc\u00e7l\u00fc \u00f6zellikler sunar.<\/p>\n<h4>\u00d6zel Do\u011frulama Kurallar\u0131 (Custom Rules)<\/h4>\n<p><code>calidation<\/code>&#8216;\u0131n en g\u00fc\u00e7l\u00fc yanlar\u0131ndan biri, kendi \u00f6zel do\u011frulama kurallar\u0131n\u0131z\u0131 kolayca tan\u0131mlayabilmenizdir. \u00d6rne\u011fin, bir \u015fifrenin en az bir b\u00fcy\u00fck harf, bir k\u00fc\u00e7\u00fck harf ve bir rakam i\u00e7ermesi gerekti\u011fini do\u011frulamak isteyebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">import { Validator } from 'calidation';\n\n\/\/ \u00d6zel kural\u0131m\u0131z\u0131 tan\u0131ml\u0131yoruz\nValidator.addRule('strongPassword', (value) => {\n  if (!value) return true; \/\/ Bo\u015fsa zorunlu de\u011filse ge\u00e7erli say\n  const hasUpperCase = \/[A-Z]\/.test(value);\n  const hasLowerCase = \/[a-z]\/.test(value);\n  const hasNumber = \/[0-9]\/.test(value);\n  return hasUpperCase && hasLowerCase && hasNumber;\n}, '\u015eifre en az bir b\u00fcy\u00fck harf, bir k\u00fc\u00e7\u00fck harf ve bir rakam i\u00e7ermeli.');\n\nconst passwordValidator = new Validator({\n  password: {\n    rule: 'strongPassword',\n    message: 'L\u00fctfen daha g\u00fc\u00e7l\u00fc bir \u015fifre belirleyin.', \/\/ Kural\u0131n varsay\u0131lan mesaj\u0131n\u0131 ezebiliriz\n  },\n});\n\n\/\/ Art\u0131k 'strongPassword' kural\u0131n\u0131 herhangi bir yerde kullanabiliriz.<\/code><\/pre>\n<p><code>Validator.addRule<\/code> metodu \u00fc\u00e7 arg\u00fcman al\u0131r: kural ad\u0131, do\u011frulama fonksiyonu ve varsay\u0131lan hata mesaj\u0131. Do\u011frulama fonksiyonu, do\u011frulanacak de\u011feri al\u0131r ve ge\u00e7erliyse <code>true<\/code>, ge\u00e7ersizse <code>false<\/code> d\u00f6ner.<\/p>\n<h4>Asenkron Do\u011frulama<\/h4>\n<p>Kullan\u0131c\u0131 ad\u0131 benzersizli\u011fi kontrol\u00fc gibi sunucu taraf\u0131 bir API \u00e7a\u011fr\u0131s\u0131 gerektiren durumlar i\u00e7in asenkron do\u011frulama yapmak gerekebilir. <code>calidation<\/code>, bu t\u00fcr senaryolar\u0131 destekler.<\/p>\n<pre><code class=\"language-javascript\">import { Validator } from 'calidation';\n\n\/\/ Sim\u00fcle edilmi\u015f bir API \u00e7a\u011fr\u0131s\u0131\nconst checkUsernameAvailability = async (username) => {\n  console.log(<code>Kullan\u0131c\u0131 ad\u0131 \"${username}\" kontrol ediliyor...<\/code>);\n  await new Promise(resolve => setTimeout(resolve, 1500)); \/\/ 1.5 saniye bekle\n  const unavailableUsernames = ['admin', 'moderator', 'testuser'];\n  return !unavailableUsernames.includes(username.toLowerCase());\n};\n\nValidator.addRule('uniqueUsername', async (value) => {\n  if (!value) return true;\n  return await checkUsernameAvailability(value);\n}, 'Bu kullan\u0131c\u0131 ad\u0131 zaten al\u0131nm\u0131\u015f.');\n\nconst asyncValidator = new Validator({\n  username: {\n    rule: 'uniqueUsername',\n    message: 'Bu kullan\u0131c\u0131 ad\u0131 kullan\u0131lamaz.',\n  },\n});\n\n\/\/ React component i\u00e7inde kullan\u0131m (yukar\u0131daki temel form \u00f6rne\u011fine benzer)\n\/\/ handleSubmit i\u00e7inde veya handleChange i\u00e7inde asenkron do\u011frulamay\u0131 tetikleyebilirsiniz.\n\/\/ validate metodu Promise d\u00f6nd\u00fcrecektir.\n\/\/ const validationResult = await asyncValidator.validate(formData);<\/code><\/pre>\n<p>Asenkron bir kural tan\u0131mlad\u0131\u011f\u0131n\u0131zda, <code>validate<\/code> metodu bir <code>Promise<\/code> d\u00f6nd\u00fcrecektir. Bu <code>Promise<\/code> \u00e7\u00f6z\u00fcld\u00fc\u011f\u00fcnde, do\u011frulama sonucunu i\u00e7eren bir obje elde edersiniz. Bu, <code>handleSubmit<\/code> fonksiyonunuzu <code>async\/await<\/code> kullanarak y\u00f6netmenizi gerektirir.<\/p>\n<h4>Ba\u011f\u0131ml\u0131 Alan Do\u011frulama<\/h4>\n<p>Bir alan\u0131n do\u011frulu\u011funun ba\u015fka bir alan\u0131n de\u011ferine ba\u011fl\u0131 oldu\u011fu durumlar (\u00f6rne\u011fin, \u015fifre ve \u015fifre tekrar\u0131 alanlar\u0131n\u0131n e\u015fle\u015fmesi) s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir senaryodur. <code>calidation<\/code>&#8216;da bu, do\u011frulama fonksiyonuna t\u00fcm form verilerini ileterek yap\u0131labilir.<\/p>\n<pre><code class=\"language-javascript\">import { Validator } from 'calidation';\n\nValidator.addRule('matchesField', (value, data, fieldName) => {\n  if (!value || !data || !fieldName) return true;\n  return value === data[fieldName];\n}, 'Bu alan {field} ile e\u015fle\u015fmiyor.'); \/\/ {field} placeholder'\u0131 kullan\u0131labilir\n\nconst passwordMatchValidator = new Validator({\n  password: {\n    rule: 'minLength:6',\n    message: '\u015eifreniz en az 6 karakter olmal\u0131.',\n  },\n  confirmPassword: {\n    rule: ['required', 'matchesField:password'], \/\/ Birden fazla kural ve ba\u011f\u0131ml\u0131 kural\n    message: {\n      required: '\u015eifre tekrar\u0131 zorunludur.',\n      matchesField: '\u015eifreler e\u015fle\u015fmiyor.',\n    },\n  },\n});\n\n\/\/ Kullan\u0131m:\n\/\/ const validationResult = passwordMatchValidator.validate(formData);<\/code><\/pre>\n<p><code>matchesField:password<\/code> kural\u0131nda, <code>:password<\/code> k\u0131sm\u0131 <code>matchesField<\/code> fonksiyonuna <code>fieldName<\/code> olarak iletilir. Bu sayede <code>value === data[fieldName]<\/code> kontrol\u00fc yap\u0131labilir. <code>message<\/code> \u00f6zelli\u011fine bir obje vererek her kural i\u00e7in ayr\u0131 mesajlar tan\u0131mlayabiliriz.<\/p>\n<h4>Dinamik Formlar ve Liste Do\u011frulama<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n dinamik olarak alan ekleyebildi\u011fi veya kald\u0131rabildi\u011fi formlarda (\u00f6rne\u011fin, bir liste \u00f6\u011feleri ekleme) do\u011frulama yapmak daha karma\u015f\u0131k hale gelebilir. <code>calidation<\/code> do\u011frudan liste do\u011frulama i\u00e7in \u00f6zel bir yap\u0131 sunmasa da, bu senaryolar\u0131 mevcut yap\u0131s\u0131yla y\u00f6netmek m\u00fcmk\u00fcnd\u00fcr. Her liste \u00f6\u011fesi i\u00e7in ayr\u0131 bir do\u011frulay\u0131c\u0131 \u00f6rne\u011fi olu\u015fturabilir veya ana do\u011frulay\u0131c\u0131n\u0131n <code>validate<\/code> metoduna dinamik olarak olu\u015fturulmu\u015f veriyi g\u00f6nderebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek: Bir array i\u00e7indeki objelerin do\u011frulanmas\u0131\nconst itemValidator = new Validator({\n  name: { rule: 'required', message: '\u00dcr\u00fcn ad\u0131 zorunludur.' },\n  quantity: { rule: 'numeric', message: 'Miktar say\u0131 olmal\u0131.' },\n});\n\n\/\/ React component i\u00e7inde\nconst [items, setItems] = useState([{ id: 1, name: '', quantity: '' }]);\nconst [itemErrors, setItemErrors] = useState({});\n\nconst handleItemChange = (id, field, value) => {\n  setItems(prevItems =>\n    prevItems.map(item => (item.id === id ? { ...item, [field]: value } : item))\n  );\n  \/\/ An\u0131nda do\u011frulama i\u00e7in:\n  const currentItem = items.find(item => item.id === id);\n  const updatedItem = { ...currentItem, [field]: value };\n  const validationResult = itemValidator.validate(updatedItem);\n  setItemErrors(prevErrors => ({ ...prevErrors, [id]: validationResult.errors }));\n};\n\nconst handleListSubmit = (e) => {\n  e.preventDefault();\n  let allItemsValid = true;\n  let newErrors = {};\n\n  items.forEach(item => {\n    const validationResult = itemValidator.validate(item);\n    if (!validationResult.isValid) {\n      allItemsValid = false;\n      newErrors[item.id] = validationResult.errors;\n    }\n  });\n\n  setItemErrors(newErrors);\n\n  if (allItemsValid) {\n    console.log('T\u00fcm \u00f6\u011feler ge\u00e7erli:', items);\n    \/\/ Submit list data\n  } else {\n    console.log('\u00d6\u011felerde hatalar var:', newErrors);\n  }\n};<\/code><\/pre>\n<p>Bu yakla\u015f\u0131mda, her bir liste \u00f6\u011fesini ayr\u0131 ayr\u0131 do\u011frulayarak hatalar\u0131 <code>itemErrors<\/code> state&#8217;inde sakl\u0131yoruz.<\/p>\n<h4>Ko\u015fullu Do\u011frulama<\/h4>\n<p>Bir alan\u0131n do\u011frulama kurallar\u0131n\u0131n, ba\u015fka bir alan\u0131n de\u011ferine veya belirli bir duruma ba\u011fl\u0131 oldu\u011fu senaryolar i\u00e7in ko\u015fullu do\u011frulama kullan\u0131\u015fl\u0131d\u0131r. <code>calidation<\/code>&#8216;da bu, <code>when<\/code> \u00f6zelli\u011fi ile veya \u00f6zel bir kural i\u00e7inde mant\u0131k y\u00fcr\u00fcterek yap\u0131labilir.<\/p>\n<pre><code class=\"language-javascript\">const conditionalValidator = new Validator({\n  newsletterSubscription: {\n    rule: 'boolean',\n  },\n  email: {\n    rule: 'email',\n    message: 'Ge\u00e7erli bir e-posta adresi girin.',\n    when: {\n      newsletterSubscription: true, \/\/ newsletterSubscription true ise email'i do\u011frula\n    },\n  },\n});\n\n\/\/ Veya daha karma\u015f\u0131k ko\u015fullar i\u00e7in custom rule i\u00e7inde mant\u0131k y\u00fcr\u00fctebilirsiniz.\nValidator.addRule('conditionalRequired', (value, data, fieldName) => {\n  if (data.userType === 'admin' && !value) {\n    return false; \/\/ admin ise ve bo\u015fsa ge\u00e7ersiz\n  }\n  return true;\n}, 'Bu alan sadece y\u00f6neticiler i\u00e7in zorunludur.');\n\nconst complexConditionalValidator = new Validator({\n  userType: {\n    rule: 'required',\n  },\n  adminCode: {\n    rule: ['conditionalRequired:userType', 'minLength:5'],\n    message: {\n      conditionalRequired: 'Y\u00f6netici kodu zorunludur.',\n      minLength: 'Y\u00f6netici kodu en az 5 karakter olmal\u0131.'\n    }\n  }\n});<\/code><\/pre>\n<p><code>when<\/code> \u00f6zelli\u011fi, belirli bir alan\u0131n de\u011ferine g\u00f6re kural\u0131n uygulan\u0131p uygulanmayaca\u011f\u0131n\u0131 belirler. <code>conditionalRequired<\/code> gibi \u00f6zel kurallar ise daha karma\u015f\u0131k ko\u015fullu mant\u0131k i\u00e7in esneklik sa\u011flar.<\/p>\n<h3>calidation&#8217;\u0131n React ile Entegrasyonu<\/h3>\n<p><code>calidation<\/code>&#8216;\u0131 React uygulamalar\u0131n\u0131za entegre etmenin en yayg\u0131n yollar\u0131, React&#8217;in yerle\u015fik state y\u00f6netimi mekanizmalar\u0131n\u0131 kullanmak veya \u00f6zel bir hook (custom hook) olu\u015fturmakt\u0131r.<\/p>\n<h4><code>useState<\/code> ve <code>useRef<\/code> ile Entegrasyon<\/h4>\n<p>Yukar\u0131daki \u00f6rneklerde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, <code>useState<\/code> hook&#8217;u <code>formData<\/code> ve <code>errors<\/code> state&#8217;lerini y\u00f6netmek i\u00e7in temel bir yakla\u015f\u0131md\u0131r. <code>useRef<\/code> ise, do\u011frudan DOM elemanlar\u0131na eri\u015fmek veya bir de\u011ferin render&#8217;lar aras\u0131nda de\u011fi\u015fmeden kalmas\u0131n\u0131 sa\u011flamak istedi\u011finizde kullan\u0131labilir, ancak form de\u011ferleri i\u00e7in <code>useState<\/code> genellikle daha uygundur.<\/p>\n<p>Her bir input i\u00e7in <code>onChange<\/code> olay\u0131n\u0131 dinleyerek <code>formData<\/code>&#8216;y\u0131 g\u00fcncellemek ve ard\u0131ndan <code>calidation<\/code>&#8216;\u0131 kullanarak do\u011frulama yapmak standart bir y\u00f6ntemdir.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Zaten yukar\u0131daki \u00f6rneklerde detayl\u0131ca g\u00f6sterildi.\n\/\/ Ana fikir:\n\/\/ 1. formData state'i (useState)\n\/\/ 2. errors state'i (useState)\n\/\/ 3. handleChange fonksiyonu (onChange olay\u0131nda formData'y\u0131 ve hatalar\u0131 g\u00fcnceller)\n\/\/ 4. handleSubmit fonksiyonu (onSubmit olay\u0131nda t\u00fcm formu do\u011frular ve hata varsa setErrors'\u0131 \u00e7a\u011f\u0131r\u0131r)<\/code><\/pre>\n<h4><code>useForm<\/code> veya Benzeri Custom Hook Yakla\u015f\u0131mlar\u0131<\/h4>\n<p>Tekrarlayan form do\u011frulama mant\u0131\u011f\u0131n\u0131 soyutlamak ve kodunuzu daha temiz hale getirmek i\u00e7in kendi <code>useForm<\/code> custom hook&#8217;unuzu olu\u015fturabilirsiniz. Bu hook, <code>calidation<\/code> do\u011frulay\u0131c\u0131s\u0131n\u0131, form verilerini, hatalar\u0131 ve <code>handleChange<\/code>, <code>handleSubmit<\/code> gibi yard\u0131mc\u0131 fonksiyonlar\u0131 kapsayabilir.<\/p>\n<pre><code class=\"language-jsx\">import { useState, useCallback } from 'react';\nimport { Validator } from 'calidation';\n\nfunction useForm(initialState, validationSchema) {\n  const [formData, setFormData] = useState(initialState);\n  const [errors, setErrors] = useState({});\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const validator = new Validator(validationSchema);\n\n  const handleChange = useCallback((e) => {\n    const { name, value, type, checked } = e.target;\n    const newValue = type === 'checkbox' ? checked : value;\n\n    setFormData((prevData) => {\n      const updatedData = { ...prevData, [name]: newValue };\n      \/\/ An\u0131nda do\u011frulama\n      const validationResult = validator.validate(updatedData);\n      setErrors(validationResult.errors);\n      return updatedData;\n    });\n  }, [validator]); \/\/ validator'\u0131n de\u011fi\u015fmedi\u011finden emin olmak i\u00e7in ba\u011f\u0131ml\u0131l\u0131k ekliyoruz\n\n  const handleSubmit = useCallback(async (callback) => {\n    setIsSubmitting(true);\n    const validationResult = await validator.validate(formData); \/\/ Asenkron kural varsa await\n    \n    if (validationResult.isValid) {\n      await callback(formData); \/\/ Form ge\u00e7erliyse d\u0131\u015far\u0131dan gelen callback'i \u00e7a\u011f\u0131r\n      setErrors({}); \/\/ Ba\u015far\u0131l\u0131 g\u00f6nderimde hatalar\u0131 temizle\n    } else {\n      setErrors(validationResult.errors);\n    }\n    setIsSubmitting(false);\n  }, [formData, validator]);\n\n  const resetForm = useCallback(() => {\n    setFormData(initialState);\n    setErrors({});\n  }, [initialState]);\n\n  return {\n    formData,\n    errors,\n    handleChange,\n    handleSubmit,\n    isSubmitting,\n    resetForm,\n  };\n}\n\nexport default useForm;<\/code><\/pre>\n<p>Bu <code>useForm<\/code> hook&#8217;unu kullanarak form bile\u015feniniz \u00e7ok daha sade hale gelir:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport useForm from '.\/useForm'; \/\/ Kendi hook'umuzu import ediyoruz\nimport { Validator } from 'calidation';\n\nconst loginValidationSchema = {\n  email: {\n    rule: 'email',\n    message: 'Ge\u00e7erli bir e-posta adresi girin.',\n  },\n  password: {\n    rule: 'minLength:6',\n    message: '\u015eifreniz en az 6 karakter olmal\u0131.',\n  },\n};\n\nfunction LoginForm() {\n  const { formData, errors, handleChange, handleSubmit, isSubmitting, resetForm } = useForm(\n    { email: '', password: '' },\n    loginValidationSchema\n  );\n\n  const onSubmit = async (data) => {\n    console.log('Giri\u015f yap\u0131l\u0131yor:', data);\n    await new Promise(resolve => setTimeout(resolve, 1000));\n    alert('Giri\u015f ba\u015far\u0131l\u0131!');\n    resetForm();\n  };\n\n  return (\n    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(onSubmit); }} className=\"p-4 border rounded shadow-sm\">\n      <h3 className=\"text-xl font-bold mb-4\">Giri\u015f Yap<\/h3>\n\n      <div className=\"mb-3\">\n        <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\">E-posta:<\/label>\n        <input\n          type=\"email\"\n          id=\"email\"\n          name=\"email\"\n          value={formData.email}\n          onChange={handleChange}\n          className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2\"\n        \/>\n        {errors.email && <p className=\"text-red-500 text-sm mt-1\">{errors.email}<\/p>}\n      <\/div>\n\n      <div className=\"mb-4\">\n        <label htmlFor=\"password\" className=\"block text-sm font-medium text-gray-700\">\u015eifre:<\/label>\n        <input\n          type=\"password\"\n          id=\"password\"\n          name=\"password\"\n          value={formData.password}\n          onChange={handleChange}\n          className=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2\"\n        \/>\n        {errors.password && <p className=\"text-red-500 text-sm mt-1\">{errors.password}<\/p>}\n      <\/div>\n\n      <button\n        type=\"submit\"\n        disabled={isSubmitting}\n        className=\"w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 disabled:opacity-50\"\n      >\n        {isSubmitting ? 'G\u00f6nderiliyor...' : 'Giri\u015f Yap'}\n      <\/button>\n    <\/form>\n  );\n}\n\nexport default LoginForm;<\/code><\/pre>\n<p>Bu custom hook yakla\u015f\u0131m\u0131, form do\u011frulama mant\u0131\u011f\u0131n\u0131 yeniden kullan\u0131labilir hale getirir ve bile\u015fenlerinizi daha okunur ve y\u00f6netilebilir k\u0131lar.<\/p>\n<h4>Performans \u0130pu\u00e7lar\u0131<\/h4>\n<p>*   <strong>Do\u011frulay\u0131c\u0131y\u0131 Tek Seferlik Olu\u015fturun:<\/strong> <code>Validator<\/code> \u00f6rne\u011fini her render&#8217;da yeniden olu\u015fturmak yerine, bile\u015fenin d\u0131\u015f\u0131nda veya <code>useMemo<\/code> ile bir kez olu\u015fturun. Yukar\u0131daki <code>useForm<\/code> hook&#8217;unda bu, <code>new Validator(validationSchema)<\/code>&#8216;n\u0131n hook&#8217;un i\u00e7inde bir kez olu\u015fturulmas\u0131yla sa\u011flan\u0131r.<br \/>\n*   <strong><code>useCallback<\/code> Kullan\u0131m\u0131:<\/strong> <code>handleChange<\/code> ve <code>handleSubmit<\/code> gibi fonksiyonlar\u0131 <code>useCallback<\/code> ile sarmalayarak gereksiz yeniden olu\u015fturmalar\u0131 \u00f6nleyin. Bu, \u00f6zellikle b\u00fcy\u00fck formlarda veya \u00e7ocuk bile\u015fenlere props olarak iletildi\u011finde performans\u0131 art\u0131rabilir.<br \/>\n*   <strong>Gecikmeli Do\u011frulama:<\/strong> <code>onChange<\/code> olay\u0131nda her tu\u015f vuru\u015funda do\u011frulama yapmak yerine, <code>onBlur<\/code> olay\u0131nda veya bir <code>debounce<\/code> fonksiyonu ile gecikmeli do\u011frulama yaparak gereksiz hesaplamalar\u0131 azaltabilirsiniz.<\/p>\n<h3>Ger\u00e7ek D\u00fcnya Uygulamalar\u0131 ve En \u0130yi Pratikler<\/h3>\n<p>Form do\u011frulama sadece teknik bir gereklilik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen bir fakt\u00f6rd\u00fcr.<\/p>\n<h4>Kullan\u0131c\u0131 Deneyimi (UX) A\u00e7\u0131s\u0131ndan Do\u011frulama<\/h4>\n<p>*   <strong>An\u0131nda Geri Bildirim:<\/strong> Kullan\u0131c\u0131 bir alan\u0131 terk etti\u011finde (<code>onBlur<\/code>) veya yazmaya ba\u015flad\u0131\u011f\u0131nda (<code>onChange<\/code>) an\u0131nda do\u011frulama yaparak hatalar\u0131 h\u0131zl\u0131ca belirtin. Bu, kullan\u0131c\u0131lar\u0131n formu g\u00f6ndermeden \u00f6nce hatalar\u0131 d\u00fczeltmesine olanak tan\u0131r.<br \/>\n*   <strong>A\u00e7\u0131k ve Anla\u015f\u0131l\u0131r Hata Mesajlar\u0131:<\/strong> Hata mesajlar\u0131, hatan\u0131n ne oldu\u011funu ve nas\u0131l d\u00fczeltilece\u011fini net bir \u015fekilde a\u00e7\u0131klamal\u0131d\u0131r. <code>calidation<\/code>&#8216;\u0131n \u00f6zelle\u015ftirilebilir hata mesajlar\u0131 bu konuda b\u00fcy\u00fck avantaj sa\u011flar.<br \/>\n*   <strong>G\u00f6rsel \u0130\u015faretler:<\/strong> Hatal\u0131 alanlar\u0131 k\u0131rm\u0131z\u0131 kenarl\u0131klar, hata simgeleri veya metin renkleriyle g\u00f6rsel olarak vurgulay\u0131n.<br \/>\n*   <strong>Formu G\u00f6ndermeden \u00d6nce \u00d6nleme:<\/strong> Form ge\u00e7erli olana kadar g\u00f6nder d\u00fc\u011fmesini devre d\u0131\u015f\u0131 b\u0131rakmak, gereksiz sunucu isteklerini \u00f6nler ve kullan\u0131c\u0131y\u0131 bilgilendirir.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility) Konular\u0131<\/h4>\n<p>*   <strong>ARIA Nitelikleri:<\/strong> Hata mesajlar\u0131n\u0131 ve hata durumundaki input alanlar\u0131n\u0131, ekran okuyucular\u0131n anlayabilece\u011fi \u015fekilde <code>aria-invalid=\"true\"<\/code> ve <code>aria-describedby=\"[hata-mesaj\u0131-id]\"<\/code> gibi ARIA nitelikleriyle i\u015faretleyin.<br \/>\n*   <strong>Etiketler:<\/strong> Her input alan\u0131n\u0131n ili\u015fkili bir <code><label><\/code> etiketi oldu\u011fundan emin olun.<br \/>\n*   <strong>Odak Y\u00f6netimi:<\/strong> Form g\u00f6nderildi\u011finde hatalar varsa, odak noktas\u0131n\u0131 ilk hatal\u0131 alana ta\u015f\u0131mak, klavye ile gezinme yapan kullan\u0131c\u0131lar i\u00e7in faydal\u0131d\u0131r.<\/p>\n<h4>Uluslararas\u0131la\u015fma (i18n) ve Hata Mesajlar\u0131<\/h4>\n<p>\u00c7ok dilli uygulamalarda hata mesajlar\u0131n\u0131n \u00e7evrilmesi gerekir. <code>calidation<\/code>&#8216;\u0131n hata mesajlar\u0131n\u0131 bir obje olarak tan\u0131mlama yetene\u011fi ve \u00f6zel kural mesajlar\u0131n\u0131 ezme esnekli\u011fi, i18n entegrasyonunu kolayla\u015ft\u0131r\u0131r. Bir i18n k\u00fct\u00fcphanesi (\u00f6rn. <code>react-i18next<\/code>) ile entegre ederek hata mesajlar\u0131n\u0131 dinamik olarak alabilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ i18n k\u00fct\u00fcphanesinden \u00e7eviri fonksiyonu geldi\u011fini varsayal\u0131m\nconst t = (key, params) => { \/<em> \u00e7eviri mant\u0131\u011f\u0131 <\/em>\/ return key; };\n\nconst i18nValidator = new Validator({\n  email: {\n    rule: 'email',\n    message: t('validation.emailInvalid'), \/\/ \u00c7eviri anahtar\u0131n\u0131 kullan\n  },\n  password: {\n    rule: 'minLength:6',\n    message: t('validation.passwordMinLength', { length: 6 }), \/\/ Parametreli \u00e7eviri\n  },\n});<\/code><\/pre>\n<h4>Test Etme Stratejileri<\/h4>\n<p>Form do\u011frulamas\u0131n\u0131 test etmek, uygulaman\u0131z\u0131n g\u00fcvenilirli\u011fini sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p>*   <strong>Birim Testleri:<\/strong> Her bir do\u011frulama kural\u0131n\u0131 ayr\u0131 ayr\u0131 test edin. <code>calidation<\/code>&#8216;\u0131n <code>Validator<\/code> s\u0131n\u0131f\u0131 ve \u00f6zel kurallar\u0131n\u0131z, izole bir \u015fekilde test edilebilir.<br \/>\n*   <strong>Entegrasyon Testleri:<\/strong> Form bile\u015fenlerinizin, <code>calidation<\/code> ile birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 test edin. Formu ge\u00e7ersiz verilerle g\u00f6ndermeyi deneyin ve do\u011fru hata mesajlar\u0131n\u0131n g\u00f6sterildi\u011finden emin olun. Ge\u00e7erli verilerle g\u00f6nderildi\u011finde ba\u015far\u0131l\u0131 bir i\u015flem ger\u00e7ekle\u015fti\u011fini do\u011frulay\u0131n.<br \/>\n*   <strong>E2E Testleri:<\/strong> Kullan\u0131c\u0131 aray\u00fcz\u00fc \u00fczerinden u\u00e7tan uca testler yaparak, ger\u00e7ek kullan\u0131c\u0131 senaryolar\u0131nda form do\u011frulaman\u0131n do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulay\u0131n.<\/p>\n<h4>G\u00fcvenlik<\/h4>\n<p>Unutulmamal\u0131d\u0131r ki, istemci taraf\u0131 do\u011frulama sadece kullan\u0131c\u0131 deneyimi i\u00e7indir. Asla sunucu taraf\u0131 do\u011frulamay\u0131 atlamay\u0131n. K\u00f6t\u00fc niyetli bir kullan\u0131c\u0131, istemci taraf\u0131 do\u011frulamay\u0131 kolayca atlayabilir. Bu nedenle, sunucu taraf\u0131nda da ayn\u0131 veya daha s\u0131k\u0131 do\u011frulama kurallar\u0131n\u0131 uygulaman\u0131z hayati \u00f6neme sahiptir. <code>calidation<\/code>&#8216;\u0131 hem istemci taraf\u0131nda hem de Node.js gibi bir sunucu ortam\u0131nda kullanabilirsiniz, bu da do\u011frulama mant\u0131\u011f\u0131n\u0131z\u0131 her iki tarafta da payla\u015fman\u0131za olanak tan\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular ve \u0130pu\u00e7lar\u0131<\/h3>\n<h4>Hata Mesajlar\u0131n\u0131 \u00d6zelle\u015ftirme<\/h4>\n<p><code>calidation<\/code>&#8216;da hata mesajlar\u0131n\u0131 \u00f6zelle\u015ftirmek olduk\u00e7a kolayd\u0131r. Kural tan\u0131m\u0131n\u0131n <code>message<\/code> \u00f6zelli\u011fini kullan\u0131rs\u0131n\u0131z:<\/p>\n<pre><code class=\"language-javascript\">const myValidator = new Validator({\n  age: {\n    rule: 'numeric',\n    message: 'Ya\u015f alan\u0131 sadece say\u0131sal de\u011ferler i\u00e7ermelidir.',\n  },\n});<\/code><\/pre>\n<p>Birden fazla kural i\u00e7in farkl\u0131 mesajlar:<\/p>\n<pre><code class=\"language-javascript\">const multipleRulesValidator = new Validator({\n  username: {\n    rule: ['required', 'minLength:3'],\n    message: {\n      required: 'Kullan\u0131c\u0131 ad\u0131 bo\u015f b\u0131rak\u0131lamaz.',\n      minLength: 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131.',\n    },\n  },\n});<\/code><\/pre>\n<h4>Birden Fazla Form Alan\u0131 \u0130\u00e7in Do\u011frulama<\/h4>\n<p><code>calidation<\/code> zaten varsay\u0131lan olarak t\u00fcm form alanlar\u0131n\u0131 ayn\u0131 anda do\u011frular. <code>validator.validate(formData)<\/code> \u00e7a\u011fr\u0131s\u0131, <code>formData<\/code> i\u00e7indeki her bir alan i\u00e7in tan\u0131mlanm\u0131\u015f kurallar\u0131 kontrol eder ve t\u00fcm hatalar\u0131 <code>validationResult.errors<\/code> objesinde d\u00f6nd\u00fcr\u00fcr.<\/p>\n<h4>Form S\u0131f\u0131rlama<\/h4>\n<p>Formu s\u0131f\u0131rlamak i\u00e7in, <code>formData<\/code> state&#8217;ini ba\u015flang\u0131\u00e7 de\u011ferlerine ve <code>errors<\/code> state&#8217;ini bo\u015f bir objeye geri ayarlaman\u0131z yeterlidir. <code>useForm<\/code> custom hook&#8217;umuzda <code>resetForm<\/code> fonksiyonu bu i\u015flevi g\u00f6r\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">const resetForm = () => {\n  setFormData(initialState);\n  setErrors({});\n};<\/code><\/pre>\n<h4>Sadece Belirli Alanlar\u0131 Do\u011frulama<\/h4>\n<p>Bazen sadece belirli bir alan\u0131 do\u011frulamak isteyebilirsiniz (\u00f6rne\u011fin, <code>onBlur<\/code> olay\u0131nda). <code>calidation<\/code>&#8216;\u0131n <code>validate<\/code> metodu, ikinci bir arg\u00fcman olarak do\u011frulanacak alan adlar\u0131n\u0131 bir dizi olarak alabilir:<\/p>\n<pre><code class=\"language-javascript\">const handleChange = (e) => {\n  const { name, value } = e.target;\n  setFormData((prevData) => ({ ...prevData, [name]: value }));\n\n  \/\/ Sadece de\u011fi\u015fen alan\u0131 do\u011frula\n  const validationResult = registerValidator.validate({ ...formData, [name]: value }, [name]);\n  setErrors((prevErrors) => ({ ...prevErrors, ...validationResult.errors }));\n};<\/code><\/pre>\n<p>Bu, \u00f6zellikle b\u00fcy\u00fck formlarda performans a\u00e7\u0131s\u0131ndan faydal\u0131 olabilir, \u00e7\u00fcnk\u00fc yaln\u0131zca ilgili alan\u0131n kurallar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React uygulamalar\u0131nda form do\u011frulama, hem kullan\u0131c\u0131 deneyimi hem de veri b\u00fct\u00fcnl\u00fc\u011f\u00fc a\u00e7\u0131s\u0131ndan g\u00f6z ard\u0131 edilmemesi gereken kritik bir s\u00fcre\u00e7tir. <code>calidation<\/code>, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in hafif, esnek ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar. Temel do\u011frulama kurallar\u0131ndan \u00f6zel, asenkron ve ko\u015fullu do\u011frulama senaryolar\u0131na kadar geni\u015f bir yelpazeyi desteklerken, React&#8217;in state y\u00f6netimi mekanizmalar\u0131yla sorunsuz bir \u015fekilde entegre olur.<\/p>\n<p><code>calidation<\/code>&#8216;\u0131n odaklanm\u0131\u015f yap\u0131s\u0131, \u00f6zellikle form y\u00f6netimini kendiniz halletmeyi tercih etti\u011finiz veya <code>Formik<\/code> gibi daha kapsaml\u0131 k\u00fct\u00fcphanelerin getirdi\u011fi ek soyutlamalara ihtiya\u00e7 duymad\u0131\u011f\u0131n\u0131z durumlarda parlar. Kendi <code>useForm<\/code> custom hook&#8217;unuzu olu\u015fturarak <code>calidation<\/code>&#8216;\u0131 daha da soyutlayabilir ve projenizde yeniden kullan\u0131labilir, temiz bir form do\u011frulama katman\u0131 olu\u015fturabilirsiniz.<\/p>\n<p>Unutmay\u0131n ki istemci taraf\u0131 do\u011frulama, kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flamak ve hatal\u0131 veri g\u00f6nderimini azaltmak i\u00e7in harika olsa da, g\u00fcvenlik ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fcn nihai garantisi her zaman sunucu taraf\u0131 do\u011frulamad\u0131r. <code>calidation<\/code>&#8216;\u0131 hem istemci hem de sunucu taraf\u0131nda kullanarak tutarl\u0131 bir do\u011frulama mant\u0131\u011f\u0131 olu\u015fturabilir, b\u00f6ylece uygulaman\u0131z\u0131n her katmanda &#8220;k\u0131zg\u0131n&#8221; bir do\u011frulama deneyimi sunmas\u0131n\u0131 sa\u011flayabilirsiniz. React geli\u015ftiricileri i\u00e7in <code>calidation<\/code>, form do\u011frulama ara\u00e7 kutusunda kesinlikle bulunmas\u0131 gereken de\u011ferli bir ara\u00e7t\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber\nGiri\u015f\nWeb uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan f","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-30406","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber Giri\u015f Web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-27T08:41:20+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-09-27T08:41:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\"},\"wordCount\":2835,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\",\"name\":\"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-27T08:41:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber","og_description":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber Giri\u015f Web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri olan f","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-27T08:41:20+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"21 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber","datePublished":"2025-09-27T08:41:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/"},"wordCount":2835,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/","name":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-27T08:41:20+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-calidation-ile-kizgin-form-dogrulamasi-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamalar\u0131nda calidation ile K\u0131zg\u0131n Form Do\u011frulamas\u0131: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30406"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30406\/revisions"}],"predecessor-version":[{"id":30407,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30406\/revisions\/30407"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}