Lesson 9 / الدرس 9

Forms and validation / النماذج والتحقق

Reading a form, checking it, and telling someone what is wrong. The browser does more of this for free than most people use — and none of it is a substitute for checking on the server.

قراءة نموذج وفحصه وإخبار أحدهم بما الخطأ. والمتصفح يفعل من هذا مجانًا أكثر مما يستخدمه معظم الناس — ولا شيء منه بديل عن الفحص في الخادم.

Read, check, report

form.addEventListener('submit', function (event) {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(form));

  const problems = validate(data);          a function you write
  if (problems.length > 0) { show(problems); return; }

  send(data);
});

Keeping validation in its own function is what makes it testable — it takes an object and returns a list of problems, with no page in sight, exactly the shape lesson 19 of the basics course argued for. Run the demonstration.

What the browser already does

Attribute	The browser enforces	From
required	Not empty	The HTML course
type="email"	Looks like an address
min / max	A number in range
minlength / maxlength	A length
pattern	Matches a regular expression	grep, lesson 9 of terminal
input.checkValidity()	Ask it yourself, from JavaScript

Using these gives you validation, a message, and correct behaviour for screen readers with no JavaScript at all. Write your own only when the rule is something the browser cannot express, or when you want to control exactly how the message appears — which is what the demonstration above does, with novalidate turning the built-in messages off.

واستخدامها يعطيك تحققًا ورسالة وسلوكًا صحيحًا لقارئات الشاشة بلا JavaScript إطلاقًا. ولا تكتب تحققك إلا حين تكون القاعدة شيئًا لا يستطيع المتصفح التعبير عنه، أو حين تريد التحكم في كيفية ظهور الرسالة بالضبط — وهو ما يفعله العرض أعلاه، وnovalidate تطفئ الرسائل المدمجة.

Three details in the demonstration are the difference between a form that works and one that is usable. The message says what would be right rather than only that something is wrong. aria-invalid marks the field for a screen reader, since a red border says nothing to one. And focus moves to the first bad field, so the reader does not have to hunt for it — on a long form that single line is the whole difference.

وثلاثة تفاصيل في العرض هي الفرق بين نموذج يعمل وآخر صالح للاستخدام. فالرسالة تقول ما الصواب لا أن ثمة خطأً فقط. وaria-invalid تعلّم الحقل لقارئ الشاشة، إذ لا يقول له الحد الأحمر شيئًا. وينتقل التركيز إلى أول حقل سيئ، فلا يضطر القارئ للبحث عنه — وفي نموذج طويل يكون ذلك السطر وحده هو الفرق كله.

وتحقق عند الإرسال لا عند كل ضغطة. فإخبار أحد أن بريده غير صالح وهو يكتب المحرف الثالث أسوأ من قول لا شيء — لكن ما إن يُعلَّم حقل سيئًا حتى يصير مسح الخطأ وهو يصلحه نافعًا فعلًا. فاستمع إلى input على الحقول التي فيها خطأ بالفعل، ولها وحدها.

Try it live / جرّب بنفسك

<form id="form" novalidate>
  <input name="name" placeholder="name">
  <input name="email" placeholder="email">
  <button>Send</button>
</form>
<div id="out"></div>
<pre id="checks"></pre>

<script>
  function validate(data) {
    const problems = [];
    // your rules
    return problems;
  }

  // test it with no form at all
  console.log(validate({ name: '', email: 'x' }));
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Why keep validation in its own function?

2. Is browser validation a security measure?

3. When should you validate a field?

Your task / مهمتك

Build a form with five fields and validate it on submit with a separate validate function that takes an object and returns a list of problems. Every message must say what would be correct. Mark bad fields with aria-invalid, move focus to the first one, and clear each error as the reader fixes it. Then test your validate function directly with three objects, using the check harness from the basics course, with no form involved.

ابنِ نموذجًا بخمسة حقول وتحقق منه عند الإرسال بدالة validate منفصلة تأخذ كائنًا وتعيد قائمة مشكلات. ويجب أن تقول كل رسالة ما الصواب. وعلّم الحقول السيئة بـaria-invalid، وانقل التركيز إلى أولها، وامسح كل خطأ وهو يصلحه القارئ. ثم اختبر دالة التحقق مباشرة بثلاثة كائنات، بأداة الفحص من دورة الأساسيات، بلا نموذج إطلاقًا.

validate is a separate function: data in, problems out validate دالة منفصلة: بيانات تدخل ومشكلات تخرج
Every message says what would be correct كل رسالة تقول ما الصواب
aria-invalid set, and focus moved to the first problem aria-invalid مضبوطة والتركيز منقول إلى أول مشكلة
The function tested directly, with no form الدالة مختبَرة مباشرة بلا نموذج