Lesson 27 / الدرس 27

Validating form input / التحقق من صحة الإدخال

HTML can ask the browser to check a field before it submits — required, pattern, min and max. This is convenience, never security: the server must always check the data again.

تستطيع HTML أن تطلب من المتصفح التحقق من الحقل قبل الإرسال — بـ required و pattern و min و max. وهذا للراحة فقط، وليس أمانًا: يجب أن يتحقق الخادم من البيانات مرة أخرى دائمًا.

You already know that placeholder is not a label — it is example text that vanishes the moment the visitor starts typing. This lesson adds four attributes that ask the browser to check a value before the form is even sent: required, pattern, min and max. Read it carefully — it ends with the single most important thing to understand about all four of them.

تعرف بالفعل أن placeholder ليس تسمية؛ فهو نص مثال يختفي بمجرد أن يبدأ الزائر بالكتابة. ويضيف هذا الدرس أربع سمات تطلب من المتصفح التحقق من القيمة قبل إرسال النموذج أصلًا: required و pattern و min و max. اقرأه بعناية؛ فهو ينتهي بأهم فكرة عليك فهمها في السمات الأربع كلها.

required: block an empty field

Add required — no value needed, just the word — to any field that must not be left empty. If the visitor presses submit with it blank, the browser stops the submission on its own and points at the field with a small message, before anything is sent anywhere.

أضف required — بلا قيمة، الكلمة وحدها — إلى أي حقل يجب ألا يُترك فارغًا. فإذا ضغط الزائر زر الإرسال وهو فارغ، يوقف المتصفح الإرسال من تلقاء نفسه ويشير إلى الحقل برسالة صغيرة، قبل أن يُرسل أي شيء إلى أي مكان.

<form action="/signup" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

    <label for="nickname">Nickname (optional)</label>
    <input type="text" id="nickname" name="nickname">

    <button type="submit">Sign up</button>
</form>

Try it live: press "Sign up" with the name empty. The browser refuses to submit and points at the field on its own — nothing you had to write to make that happen.

pattern, min and max: shaping what is allowed

pattern takes a regular expression, and the value must match it exactly — useful for a fixed format like a product code. min and max bound a number, date or range input between two values. All three block submission the same way required does, with the browser writing its own message to explain what is wrong.

تقبل pattern تعبيرًا نمطيًا (regular expression)، ويجب أن تطابقه القيمة تمامًا — وهذا مفيد لصيغة ثابتة مثل رمز منتج. أما min و max فتحصران قيمة حقل number أو date أو range بين حدين. والثلاثة توقف الإرسال بالطريقة نفسها التي يفعلها required، برسالة يكتبها المتصفح نفسه لشرح الخطأ.

<form action="/order" method="post">
    <label for="code">Product code (2 letters, 4 digits)</label>
    <input type="text" id="code" name="code" pattern="[A-Za-z]{2}[0-9]{4}" placeholder="e.g. AB1234">

    <label for="qty">Quantity (1 to 10)</label>
    <input type="number" id="qty" name="qty" min="1" max="10" value="1">

    <button type="submit">Order</button>
</form>

Try it live: type "abc" in the product code and submit — pattern rejects it. Push quantity above 10 with the arrows and it will not go further — max stops it.

جرّبه: اكتب "abc" في رمز المنتج وأرسل — يرفضها pattern. وحاول رفع الكمية فوق 10 بالأسهم فلن تزيد — يوقفها max.

This is convenience, never security

Every check in this lesson runs inside the browser the visitor is using, and the visitor fully controls that browser. Anyone can open its developer tools and delete required from the page, or skip the form completely and send a request straight to your action address with a tool like curl — no browser, no HTML, no validation attributes involved at all. required, pattern, min and max only make the form pleasant to use and catch honest typing mistakes early. They are not a wall around your server.

كل فحص في هذا الدرس يجري داخل المتصفح الذي يستعمله الزائر، والزائر يتحكم في ذلك المتصفح بالكامل. فأي شخص يستطيع فتح أدوات المطوّر وحذف required من الصفحة، أو تجاوز النموذج تمامًا وإرسال طلب مباشرة إلى عنوان action بأداة مثل curl — بلا متصفح، ولا HTML، ولا أي سمة تحقق أصلًا. فـ required و pattern و min و max تجعل النموذج مريحًا في الاستعمال فقط، وتلتقط أخطاء الكتابة البريئة مبكرًا. وهي ليست جدارًا حول خادمك.

ولهذا السبب أيضًا يظهر placeholder في هذا الدرس دون أن يقوم بأي تحقق: فهو نص مثال، لا أكثر. لا يوقف الإرسال، ولا يبقى ظاهرًا بعد أن يكتب الزائر قيمة حقيقية، و — كما رأيت في درس النماذج — ليس بديلًا أبدًا عن <label> حقيقية. استعمله لتوضيح شكل إجابة جيدة، مثل placeholder="e.g. AB1234" أعلاه، لا لتسمية الحقل.

Attribute	Goes on	What it does
required	any input	Blocks submission if the field is empty
pattern	text-like inputs	Value must match the given regular expression
min / max	number, date, range	Bounds the allowed value
placeholder	any input	Example text only — disappears on typing, never a label

The four attributes in this lesson.

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

<form action="/signup" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

    <!-- add email, age and promo code fields here -->

    <button type="submit">Sign up</button>
</form>

Preview / المعاينة

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

1. What does the required attribute do?

2. A form's HTML uses required, pattern, min and max. Does the server still need to check the incoming data?

3. What is placeholder for?

Your task / مهمتك

Build a signup form: name (required), email (type="email", required), age (type="number" with min="13" and max="120"), and a promo code (pattern for four digits). Give every field a real <label>, and use placeholder only as an example, never as the label.

ابنِ نموذج تسجيل: الاسم (required)، والبريد الإلكتروني (type="email" و required)، والعمر (type="number" بـ min="13" و max="120")، ورمز ترويجي (pattern لأربعة أرقام). أعطِ كل حقل <label> حقيقية، واستعمل placeholder كمثال فقط، لا كتسمية.

The name and email fields both use required حقلا الاسم والبريد الإلكتروني يستعملان required
The age field uses min and max حقل العمر يستعمل min و max
The promo code field uses pattern حقل الرمز الترويجي يستعمل pattern
Every field has a real <label>, and any placeholder is only an example كل حقل له <label> حقيقية، وأي placeholder مجرد مثال