𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝟮𝟬𝟮𝟲: 𝗦𝘁𝗼𝗽 𝗨𝘀𝗶𝗻𝗴 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 𝗨𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝗶𝗹𝘆
2026ರಲ್ಲಿ ಫಾರ್ಮ್ ಅನ್ನು ವ್ಯಾಲಿಡೇಟ್ ಮಾಡಲು ನಿಮಗೆ ಭಾರೀ JavaScript ಲೈಬ್ರರಿಯ ಅಗತ್ಯವಿಲ್ಲ.
ಕಳೆದ ತಿಂಗಳು ನಾನು ಯಾವುದೇ ವ್ಯಾಲಿಡೇಶನ್ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸದೆ ಒಂದು ಚೆಕ್ಔಟ್ ಫಾರ್ಮ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದೆ. ಇದು ಕೇವಲ ನೇಟಿವ್ HTML ಮತ್ತು 30 ಸಾಲುಗಳ JavaScript ಬಳಸಿ ಅಗತ್ಯ ಫೀಲ್ಡ್ಗಳು (required fields), ಇಮೇಲ್ ಫಾರ್ಮ್ಯಾಟ್ ಮತ್ತು ಪಾಸ್ವರ್ಡ್ ಉದ್ದವನ್ನು ನಿರ್ವಹಿಸಿತು.
ನೀವು npm install ಮಾಡುವ ಮೊದಲು, ಹೆಚ್ಚಿನ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಲು ಈ ಆರು ನೇಟಿವ್ ಅಟ್ರಿಬ್ಯೂಟ್ಗಳನ್ನು (native attributes) ಬಳಸಿ:
• required: ಟೆಕ್ಸ್ಟ್, ಸೆಲೆಕ್ಟ್ ಮತ್ತು ಚೆಕ್ಬಾಕ್ಸ್ಗಳಿಗಾಗಿ ಖಾಲಿ ಸಬ್ಮಿಷನ್ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
• type: ಮೂಲಭೂತ ಫಾರ್ಮ್ಯಾಟ್ ತಪ್ಪುಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು type="email" ಅಥವಾ type="url" ಬಳಸಿ.
• minlength ಮತ್ತು maxlength: ಯಾವುದೇ ಕಸ್ಟಮ್ ಲಾಜಿಕ್ ಇಲ್ಲದೆ ಅಕ್ಷರಗಳ ಮಿತಿಯನ್ನು ಹೇರುತ್ತದೆ.
• min, max, ಮತ್ತು step: ಸಂಖ್ಯೆಗಳು ಮತ್ತು ದಿನಾಂಕಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
• pattern: ಪೋಸ್ಟಲ್ ಕೋಡ್ಗಳಂತಹ ನಿರ್ದಿಷ್ಟ ಫಾರ್ಮ್ಯಾಟ್ಗಳನ್ನು ಹೇರಲು regex ಬಳಸುತ್ತದೆ.
• inputmode ಮತ್ತು autocomplete: ಸರಿಯಾದ ಕೀಬೋರ್ಡ್ ಅನ್ನು ತೋರಿಸುವ ಮೂಲಕ ಅಥವಾ ತಿಳಿದಿರುವ ಡೇಟಾವನ್ನು ತುಂಬುವ ಮೂಲಕ ದೋಷಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
ನೇಟಿವ್ ಸಂದೇಶಗಳು ತುಂಬಾ ಸಾಮಾನ್ಯವಾಗಿದ್ದರೆ (generic), Constraint Validation API ಬಳಸಿ.
ಪ್ರತಿಯೊಂದು ಇನ್ಪುಟ್ ಕೂಡ ಒಂದು validity ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಉಪಯುಕ್ತ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಬರೆಯಲು ನೀವು valueMissing ಅಥವಾ typeMismatch ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪರಿಶೀಲಿಸಬಹುದು. ನಿಮ್ಮದೇ ಆದ ಪಠ್ಯವನ್ನು ತೋರಿಸಲು setCustomValidity ಬಳಸಿ.
ಇನ್ಪುಟ್ ಇವೆಂಟ್ನಲ್ಲಿ (input event) ನಿಮ್ಮ ಕಸ್ಟಮ್ ಸಂದೇಶವನ್ನು ಅಳಿಸಲು ಮರೆಯಬೇಡಿ. ನೀವು ಹಾಗೆ ಮಾಡದಿದ್ದರೆ, ಬಳಕೆದಾರರು ಅದನ್ನು ಸರಿಪಡಿಸಿದ ನಂತರವೂ ಫೀಲ್ಡ್ ದೋಷದ ಸ್ಥಿತಿಯಲ್ಲೇ (error state) ಉಳಿಯುತ್ತದೆ.
ಸ್ಟೈಲಿಂಗ್ಗಾಗಿ, ಒಂದು ಫೀಲ್ಡ್ "touched" ಆಗಿದೆಯೇ ಎಂದು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು JavaScript ಬಳಸುವುದು ನಿಲ್ಲಿಸಿ.
ಈಗ CSS :user-invalid ಪಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ (pseudo-class) ಇದನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರು ಫೀಲ್ಡ್ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದ ನಂತರವಷ್ಟೇ ಸ್ಟೈಲ್ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ದೋಷದ ಪಠ್ಯವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೋರಿಸಲು ಇದನ್ನು :has() ಸೆಲೆಕ್ಟರ್ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ. ಇದು ಡಜನ್ಗಟ್ಟಲೆ ಅನಗತ್ಯ ಕೋಡ್ ಸಾಲುಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
ನೀವು ಯಾವಾಗ ನಿಜವಾಗಿಯೂ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಬೇಕು?
ಕೇವಲ ಈ ಎರಡು ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಗಳಲ್ಲಿ ಮಾತ್ರ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ:
- Cross-field validation: ಒಂದು ಫೀಲ್ಡ್ ಮತ್ತೊಂದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದಾಗ, ಉದಾಹರಣೆಗೆ "confirm password" ಅಥವಾ ಸಂಕೀರ್ಣವಾದ ಕಂಡೀಷನಲ್ ಲಾಜಿಕ್.
- Async validation: ಡೇಟಾಬೇಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸಬೇಕಾದಾಗ, ಉದಾಹರಣೆಗೆ "ಈ ಬಳಕೆದಾರರ ಹೆಸರು ಈಗಾಗಲೇ ಬಳಕೆಯಲ್ಲಿದೆಯೇ?"
ನಿಮ್ಮ ಫಾರ್ಮ್ಗೆ ಕೇವಲ ಸಿಂಗಲ್-ಫೀಲ್ಡ್ ನಿಯಮಗಳ ಅಗತ್ಯವಿದ್ದರೆ, ನೇಟಿವ್ ವಿಧಾನವನ್ನೇ ಅನುಸರಿಸಿ. ಕಡಿಮೆ ಕೋಡ್ ಎಂದರೆ ಕಡಿಮೆ ಬಗ್ಗಳು (bugs). ಬ್ರೌಸರ್ನಿಂದಲೇ ಪ್ರಾರಂಭಿಸಿ. ಬ್ರೌಸರ್ ತನ್ನ ಮಿತಿಯನ್ನು ತಲುಪಿದಾಗ ಮಾತ್ರ ಲೈಬ್ರರಿಯನ್ನು ಸೇರಿಸಿ.
Optional learning community: https://t.me/GyaanSetuAi