Uhakiki wa Fomu mwaka 2026: Acha Kutumia Maktaba Bila Lazima
Huhitaji maktaba nzito ya JavaScript ili kuhakiki fomu mwaka 2026.
Nilitoa fomu ya malipo (checkout form) mwezi uliopita nikitumia maktaba yoyote ya uhakiki. Ilishughulikia sehemu zinazohitajika (required fields), miundo ya barua pepe, na urefu wa nywila kwa kutumia HTML asilia na mistari 30 tu ya JavaScript.
Kabla ya kuendesha npm install, tumia sifa hizi sita asilia ili kutatua matatizo mengi:
• required: Huzuia utumaji wa fomu tupu kwa maandishi, machaguo (selects), na viboksi (checkboxes).
• type: Tumia type="email" au type="url" ili kukamata makosa ya msingi ya muundo.
• minlength na maxlength: Huidhibiti urefu wa herufi bila kuhitaji mantiki maalum (custom logic).
• min, max, na step: Hudhibiti mipaka ya namba na tarehe.
• pattern: Hutumia regex ili kulazimisha miundo maalum kama vile namba za posta.
• inputmode na autocomplete: Hupunguza makosa kwa kuonyesha kibodi sahihi au kujaza data inayojulikana.
Ikiwa ujumbe asilia ni wa jumla sana, tumia Constraint Validation API.
Kila sehemu ya kuingiza data (input) ina kitu cha uhakiki (validity object). Unaweza kukagua sifa kama valueMissing au typeMismatch ili kuandika ujumbe wa makosa wenye manufaa. Tumia setCustomValidity kuonyesha maandishi yako mwenyewe.
Kumbuka kufuta ujumbe wako maalum wakati wa tukio la input. Usipofanya hivyo, sehemu hiyo itabaki katika hali ya kosa hata baada ya mtumiaji kuirekebisha.
Kwa ajili ya urembo (styling), acha kutumia JavaScript kufuatilia ikiwa sehemu imeguswa ("touched").
Pseudo-class ya CSS :user-invalid inashughulikia hili sasa. Inatumia mitindo (styles) tu baada ya mtumiaji kuingiliana na sehemu fulani. Iunganishe na kigezo cha :has() ili kuonyesha maandishi ya makosa kiotomatiki. Hii inaondoa makumi ya mistari ya kodi isiyo ya lazima.
Unapaswa kutumia maktaba (library) lini hasa?
Tumia maktaba katika mazingira mawili maalum tu:
- Cross-field validation: Wakati sehemu moja inategemea nyingine, kama vile "thibitisha nywila" (confirm password) au mantiki changamano ya masharti.
- Async validation: Unapohitaji kukagua kanzi data (database), kama vile "je, jina hili la mtumiaji limeshatumika?"
Ikiwa fomu yako inahitaji sheria za sehemu moja tu, baki na njia asilia. Kodi kidogo inamaanisha makosa (bugs) machache. Anza na kivinjari (browser). Ongeza maktaba tu wakati kivinjari kinapofikia kikomo chake.
Jumuiya ya kujifunza ya hiari: https://t.me/GyaanSetuAi