𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝟮𝟬𝟮𝟲: 𝗦𝘁𝗼𝗽 𝗨𝘀𝗶𝗻𝗴 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 𝗨𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝗶𝗹𝘆
2026-இல் ஒரு படிவத்தைச் (form) சரிபார்க்க உங்களுக்கு ஒரு கனமான JavaScript library தேவையில்லை.
கடந்த மாதம் நான் எந்தவொரு validation library-களையும் பயன்படுத்தாமல் ஒரு checkout form-ஐ உருவாக்கினேன். இது native HTML மற்றும் வெறும் 30 வரிகள் கொண்ட JavaScript மூலம் தேவையான புலங்கள் (required fields), மின்னஞ்சல் வடிவங்கள் (email shapes) மற்றும் கடவுச்சொல் நீளங்களை (password lengths) கையாண்டது.
நீங்கள் npm install செய்வதற்கு முன், பெரும்பாலான சிக்கல்களைத் தீர்க்க இந்த ஆறு native attributes-களைப் பயன்படுத்துங்கள்:
• required: உரை (text), selects மற்றும் checkboxes ஆகியவற்றில் காலியாகச் சமர்ப்பிப்பதைத் தடுக்கிறது.
• type: அடிப்படை வடிவத் தவறுகளைக் கண்டறிய type="email" அல்லது type="url" ஆகியவற்றைப் பயன்படுத்தவும்.
• minlength மற்றும் maxlength: தனிப்பயன் லாஜிக் (custom logic) இல்லாமலேயே எழுத்து வரம்புகளைக் கட்டுப்படுத்துகிறது.
• min, max, மற்றும் step: எண்கள் மற்றும் தேதிகளுக்கான வரம்புகளைக் (ranges) கட்டுப்படுத்துகிறது.
• pattern: அஞ்சல் குறியீடு போன்ற குறிப்பிட்ட வடிவங்களைச் சரிபார்க்க regex-ஐப் பயன்படுத்துகிறது.
• inputmode மற்றும் autocomplete: சரியான விசைப்பலகையைக் காட்டுவதன் மூலமோ அல்லது ஏற்கனவே உள்ள தரவுகளை நிரப்புவதன் மூலமோ பிழைகளைக் குறைக்கிறது.
இயல்பான (native) செய்திகள் மிகவும் பொதுவானதாக இருந்தால், Constraint Validation API-ஐப் பயன்படுத்தவும்.
ஒவ்வொரு input-க்கும் ஒரு validity object இருக்கும். பயனுள்ள பிழைச் செய்திகளை எழுத valueMissing அல்லது typeMismatch போன்ற பண்புகளை (properties) நீங்கள் சரிபார்க்கலாம். உங்கள் சொந்த உரையைத் காட்ட setCustomValidity-ஐப் பயன்படுத்தவும்.
input event-இல் உங்கள் தனிப்பயன் செய்தியை (custom message) நீக்க மறக்காதீர்கள். அவ்வாறு செய்யாவிட்டால், பயனர் பிழையைச் சரிசெய்த பிறகும் அந்தப் புலம் (field) பிழை நிலையிலேயே இருக்கும்.
ஸ்டைலிங் (styling) செய்ய, ஒரு புலம் "touched" ஆக உள்ளதா என்பதைக் கண்காணிக்க JavaScript-ஐப் பயன்படுத்துவதை நிறுத்துங்கள்.
இப்போது CSS :user-invalid pseudo-class இதைச் செய்கிறது. பயனர் ஒரு புலத்துடன் தொடர்பு கொண்ட பிறகு மட்டுமே இது ஸ்டைல்களைப் பயன்படுத்தும். பிழை உரையைத் தானாகவே காட்ட இதை :has() selector-உடன் இணைக்கவும். இது டஜன் கணக்கான தேவையற்ற வரிகளைக் குறைக்கும்.
நீங்கள் எப்போது உண்மையில் ஒரு library-ஐப் பயன்படுத்த வேண்டும்?
இரண்டு குறிப்பிட்ட சந்தர்ப்பங்களில் மட்டுமே ஒரு library-ஐப் பயன்படுத்தவும்:
- Cross-field validation: "confirm password" அல்லது சிக்கலான நிபந்தனை லாஜிக் (conditional logic) போன்ற ஒரு புலம் மற்றொரு புலத்தைச் சார்ந்து இருக்கும்போது.
- Async validation: "இந்த பயனர் பெயர் ஏற்கனவே பயன்பாட்டில் உள்ளதா?" என்பது போன்ற தரவுத்தளத்தைச் (database) சரிபார்க்க வேண்டியிருக்கும் போது.
உங்கள் படிவத்திற்குத் தனித்தனி புல விதிகளே (single-field rules) தேவைப்பட்டால், native முறையிலேயே இருங்கள். குறைவான குறியீடு (code) என்பது குறைவான பிழைகளைக் (bugs) குறிக்கும். உலாவியிலிருந்து (browser) தொடங்குங்கள். உலாவியின் எல்லை எட்டும்போது மட்டுமே ஒரு library-ஐச் சேர்க்கவும்.
Optional learning community: https://t.me/GyaanSetuAi