استفد من required وpattern وinputmode وواجهة Constraint Validation API لبناء نماذج متينة من دون أي مكتبة خارجية.
افتح هذا الدرس في Kodokonيأتي المتصفح بمحرّك تحقّق كامل تعيد فرق كثيرة تنفيذه في JavaScript بدافع العادة. اللبنات الأساسية: required (حقل إلزامي)، والأنواع (email وurl وdate) التي تتحقق من الصيغة، وminlength/maxlength، وmin/max/step للقيم العددية، وpattern التي تقبل تعبيرًا نمطيًا. تفصيل بالغ الأهمية: pattern مُثبَّتة ضمنيًا - يجب أن تطابق القيمة بأكملها، كأن التعبير النمطي محاط بـ ^ و$. أضف autocomplete بقيمها القياسية (postal-code وemail وtel): فهي في آنٍ واحد تجربة استخدام وإتاحة وصول.
<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text"
required pattern="[0-9]{5}"
inputmode="numeric"
autocomplete="postal-code">غالبًا ما تُساء فهم السمة inputmode: فهي لا تتحقق من شيء. إنها تُخبر النظام على الجوّال فقط بلوحة المفاتيح الافتراضية التي يجب عرضها (numeric وtel وemail وdecimal وsearch). لهذا فإن مزيج type="text" + inputmode="numeric" + pattern هو النمط المُوصى به للرموز العددية: تحصل على لوحة المفاتيح المناسبة من دون أن ترث سلوكيات type="number".
input:user-invalid {
border: 2px solid #b3261e;
}
input:user-valid {
border: 2px solid #1b5e20;
}على صعيد CSS، فضّل :user-invalid على :invalid: فالأخيرة تُطبَّق بمجرد تحميل الصفحة، فتلوّن بالأحمر حقولًا لم يلمسها المستخدم بعد. وعلى صعيد JavaScript، تُكمل واجهة Constraint Validation API مجموعة الأدوات: checkValidity() تُطلق التحقق، وكائن validity يكشف السبب الدقيق (patternMismatch وvalueMissing وtooShort)، وتتيح لك setCustomValidity() استبدال رسائل المتصفح العامة برسائلك أنت.
const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
if (zip.validity.patternMismatch) {
zip.setCustomValidity("Enter 5 digits.");
} else {
zip.setCustomValidity("");
}
});