𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝟮𝟬𝟮𝟲: 𝗦𝘁𝗼𝗽 𝗨𝘀𝗶𝗻𝗴 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 𝗨𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝗶𝗹𝘆
2026లో ఒక ఫారమ్ను వాలిడేట్ చేయడానికి మీకు భారీ JavaScript లైబ్రరీ అవసరం లేదు.
గత నెలలో నేను ఎటువంటి వాలిడేషన్ లైబ్రరీలను ఉపయోగించకుండానే ఒక చెకౌట్ ఫారమ్ను రూపొందించాను. కేవలం నేటివ్ HTML మరియు 30 లైన్ల JavaScript ఉపయోగించి నేను తప్పనిసరి ఫీల్డ్లు (required fields), ఈమెయిల్ ఫార్మాట్లు మరియు పాస్వర్డ్ పొడవులను నిర్వహించాను.
మీరు npm install రన్ చేసే ముందు, చాలా సమస్యలను పరిష్కరించడానికి ఈ ఆరు నేటివ్ ఆట్రిబ్యూట్లను (native attributes) ఉపయోగించండి:
• required: టెక్స్ట్, సెలెక్ట్స్ మరియు చెక్బాక్స్ల కోసం ఖాళీ సబ్మిషన్లను నిరోధిస్తుంది.
• type: ప్రాథమిక ఫార్మాట్ తప్పులను గుర్తించడానికి type="email" లేదా type="url" ఉపయోగించండి.
• minlength మరియు maxlength: కస్టమ్ లాజిక్ లేకుండానే క్యారెక్టర్ పరిమితులను అమలు చేస్తాయి.
• min, max, మరియు step: నంబర్లు మరియు తేదీల పరిధిని (ranges) నియంత్రిస్తాయి.
• pattern: పోస్టల్ కోడ్ల వంటి నిర్దిష్ట ఫార్మాట్లను అమలు చేయడానికి regexను ఉపయోగిస్తుంది.
• inputmode మరియు autocomplete: సరైన కీబోర్డ్ను చూపించడం లేదా తెలిసిన డేటాను నింపడం ద్వారా లోపాలను తగ్గిస్తాయి.
ఒకవేళ నేటివ్ మెసేజ్లు చాలా సాధారణంగా (generic) అనిపిస్తే, Constraint Validation APIని ఉపయోగించండి.
ప్రతి ఇన్పుట్కు ఒక validity ఆబ్జెక్ట్ ఉంటుంది. ఉపయోగకరమైన ఎర్రర్ మెసేజ్లను రాయడానికి మీరు valueMissing లేదా typeMismatch వంటి ప్రాపర్టీలను తనిఖీ చేయవచ్చు. మీ స్వంత టెక్స్ట్ను చూపించడానికి setCustomValidityని ఉపయోగించండి.
input ఈవెంట్పై మీ కస్టమ్ మెసేజ్ను క్లియర్ చేయడం మర్చిపోవద్దు. అలా చేయకపోతే, యూజర్ దానిని సరిదిద్దిన తర్వాత కూడా ఆ ఫీల్డ్ ఎర్రర్ స్టేట్లోనే ఉండిపోతుంది.
స్టైలింగ్ కోసం, ఒక ఫీల్డ్ "touched" అయిందో లేదో ట్రాక్ చేయడానికి JavaScript ఉపయోగించడం ఆపండి.
ఇప్పుడు CSS :user-invalid pseudo-class దీనిని నిర్వహిస్తుంది. ఇది యూజర్ ఒక ఫీల్తో ఇంటరాక్ట్ అయిన తర్వాత మాత్రమే స్టైల్స్ను వర్తింపజేస్తుంది. ఎర్రర్ టెక్స్ట్ను ఆటోమేటిక్గా చూపించడానికి దీనిని :has() సెలెక్టర్తో కలిపి ఉపయోగించండి. దీనివల్ల డజన్ల కొద్దీ అనవసరమైన కోడ్ లైన్లు తగ్గుతాయి.
మీరు నిజంగా లైబ్రరీని ఎప్పుడు ఉపయోగించాలి?
కేవలం ఈ రెండు ప్రత్యేక సందర్భాలలో మాత్రమే లైబ్రరీని ఉపయోగించండి:
- Cross-field validation: ఒక ఫీల్డ్ మరొక దానిపై ఆధారపడినప్పుడు, ఉదాహరణకు "confirm password" లేదా సంక్లిష్టమైన కండిషనల్ లాజిక్.
- Async validation: డేటాబేస్ను తనిఖీ చేయవలసి వచ్చినప్పుడు, ఉదాహరణకు "ఈ యూజర్ నేమ్ ఇప్పటికే ఉందా?"
మీ ఫారమ్కు కేవలం సింగిల్-ఫీల్డ్ రూల్స్ మాత్రమే అవసరమైతే, నేటివ్ పద్ధతిలోనే ఉండండి. తక్కువ కోడ్ అంటే తక్కువ బగ్స్ అని అర్థం. బ్రౌజర్తోనే ప్రారంభించండి. బ్రౌజర్ తన పరిమితికి చేరుకున్నప్పుడు మాత్రమే లైబ్రరీని జోడించండి.
Optional learning community: https://t.me/GyaanSetuAi