لا تثق بمدخلات المستخدم أبداً: دليلك العملي للتحقق من بيانات النماذج بـ JavaScript

لقد تعلمنا في المقالات السابقة كيف نبني هيكل الصفحة بـ HTML وكيف نزينها بـ CSS. اليوم، سندخل إلى عالم التفاعل ونجعل صفحاتنا "أذكى" باستخدام JavaScript، وذلك من خلال تطبيق عملي ومهم جداً: التحقق من صحة بيانات النماذج (Form Validation).

النماذج هي قلب التفاعل في معظم مواقع الويب - من تسجيل الدخول والاشتراك إلى إرسال رسالة تواصل. ولكن، ماذا يحدث إذا ترك المستخدم حقلاً مهماً فارغاً؟ أو أدخل بريداً إلكترونياً بدون علامة "@"؟

هنا تأتي أهمية التحقق من صحة البيانات. القاعدة الذهبية في تطوير الويب هي: "لا تثق أبداً بمدخلات المستخدم!". يجب دائماً التأكد من أن البيانات التي يرسلها المستخدم صحيحة وكاملة قبل معالجتها.

لماذا التحقق "في المتصفح" (Client-Side) مهم؟

هناك نوعان رئيسيان للتحقق: في المتصفح (Client-Side باستخدام JavaScript) وفي الخادم (Server-Side). التحقق في الخادم ضروري دائماً للأمان، لكن التحقق في المتصفح يقدم فوائد هائلة لتجربة المستخدم:

• تغذية راجعة فورية: يتم تنبيه المستخدم للخطأ فوراً، دون الحاجة لانتظار إعادة تحميل الصفحة.
• تقليل العبء على الخادم: منع إرسال البيانات الخاطئة يوفر موارد الخادم.
• تجربة استخدام أفضل: النماذج الذكية التي ترشد المستخدم تكون أقل إحباطاً.

بناء النموذج وتطبيق التحقق: خطوة بخطوة

سنقوم ببناء نموذج تسجيل بسيط (اسم، بريد إلكتروني، كلمة مرور، وتأكيد كلمة المرور) ونضيف إليه التحقق.

الخطوة 1: بناء هيكل النموذج (HTML)

أنشئ نموذجاً بسيطاً وضع id لكل حقل إدخال و span فارغ بجواره لعرض رسائل الخطأ.

<form id="registration-form" class="validation-form" novalidate> <!-- novalidate لإيقاف تحقق HTML5 -->
    <div class="form-group">
        <label for="username">اسم المستخدم:</label>
        <input type="text" id="username" required>
        <span class="error-message" id="username-error"></span>
    </div>
    <div class="form-group">
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" required>
        <span class="error-message" id="email-error"></span>
    </div>
    <div class="form-group">
        <label for="password">كلمة المرور:</label>
        <input type="password" id="password" required minlength="8">
        <span class="error-message" id="password-error"></span>
    </div>
    <div class="form-group">
        <label for="confirm-password">تأكيد كلمة المرور:</label>
        <input type="password" id="confirm-password" required>
        <span class="error-message" id="confirm-password-error"></span>
    </div>
    <div class="form-group">
        <button type="submit">تسجيل</button>
    </div>
</form>

الخطوة 2: إضافة أنماط للأخطاء (CSS)

أضف هذه الأنماط (يمكن وضعها في ملف CSS خارجي أو داخل <style>) لتحديد شكل الحقول ورسائل الخطأ.

.validation-form { /* ... (موجود في أعلى الكود) ... */ }
.form-group { /* ... */ }
.error-message {
    color: #e53e3e;
    font-size: 0.85em;
    margin-top: 4px;
    display: none;
}
input.error-border {
    border-color: #e53e3e;
    box-shadow: 0 0 0 1px #e53e3e;
}

الخطوة 3: كتابة منطق التحقق (JavaScript)

هذا هو الجزء الأهم. سنكتب كود JS للاستماع لحدث إرسال النموذج، والتحقق من الحقول. لاحظ استخدام event.preventDefault() لمنع النموذج من الإرسال التقليدي في حال وجود أخطاء.

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('registration-form');
    const usernameInput = document.getElementById('username');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirm-password');

    const usernameError = document.getElementById('username-error');
    const emailError = document.getElementById('email-error');
    const passwordError = document.getElementById('password-error');
    const confirmPasswordError = document.getElementById('confirm-password-error');

    form.addEventListener('submit', (event) => {
        event.preventDefault(); // منع الإرسال التلقائي للنموذج
        let isValid = true;
        resetErrors();

        // 1. التحقق من اسم المستخدم
        if (usernameInput.value.trim() === '') { // استخدام trim() لإزالة المسافات الزائدة
            showError(usernameInput, usernameError, 'اسم المستخدم مطلوب.');
            isValid = false;
        }

        // 2. التحقق من البريد الإلكتروني (الوجود والصيغة)
        if (emailInput.value.trim() === '') {
            showError(emailInput, emailError, 'البريد الإلكتروني مطلوب.');
            isValid = false;
        } else if (!isValidEmail(emailInput.value)) {
            showError(emailInput, emailError, 'صيغة البريد الإلكتروني غير صحيحة.');
            isValid = false;
        }

        // 3. التحقق من كلمة المرور
        if (passwordInput.value.trim() === '') {
            showError(passwordInput, passwordError, 'كلمة المرور مطلوبة.');
            isValid = false;
        } else if (passwordInput.value.length < 8) {
            showError(passwordInput, passwordError, 'يجب أن تكون كلمة المرور 8 أحرف على الأقل.');
            isValid = false;
        }

        // 4. التحقق من تأكيد كلمة المرور
        if (confirmPasswordInput.value !== passwordInput.value) {
            showError(confirmPasswordInput, confirmPasswordError, 'تأكيد كلمة المرور لا يتطابق.');
            isValid = false;
        }

        if (isValid) {
            console.log('النموذج صالح! يمكن إرسال البيانات.');
            alert('تم التسجيل بنجاح (افتراضياً)!');
            // هنا يتم إرسال البيانات فعلياً إلى الخادم
        }
    });

    function showError(inputElement, errorElement, message) {
        inputElement.classList.add('error-border');
        errorElement.textContent = message;
        errorElement.style.display = 'block';
    }

    function resetErrors() {
        [usernameInput, emailInput, passwordInput, confirmPasswordInput].forEach(input => input.classList.remove('error-border'));
        [usernameError, emailError, passwordError, confirmPasswordError].forEach(error => {
            error.textContent = '';
            error.style.display = 'none';
        });
    }

    function isValidEmail(email) {
        // تعبير نمطي بسيط للتحقق من وجود @ وعلامة . بعد النص
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
        return emailRegex.test(email);
    }
});

ملاحظات تقنية: أهمية `trim()` و Regex

• دالة `trim()`: تُستخدم دالة `trim()` في JavaScript لإزالة المسافات البيضاء من بداية ونهاية السلسلة النصية. هذا يضمن أن المستخدم لا يخدع النموذج بإدخال مسافات فارغة فقط في حقل مطلوب.
• التعبيرات النمطية (Regex): الدالة `isValidEmail` تستخدم التعبيرات النمطية (Regular Expressions)، وهي لغة صغيرة داخل JavaScript. تُستخدم Regex لتعريف "نمط" معين يجب أن تتطابق معه السلسلة النصية (مثل نمط البريد الإلكتروني). استخدام التعبيرات النمطية هو الطريقة الأكثر قوة ودقة للتحقق من صيغ المدخلات المعقدة.

جرب الكود بنفسك!

أفضل طريقة لفهم هذا الكود هي تجربته. انسخ أكواد HTML, CSS, JavaScript وضعها معاً.

أو الأسهل من ذلك، استخدم محرر الويب المباشر الخاص بنا! الصق الأكواد هناك وحاول إرسال النموذج ببيانات صحيحة وخاطئة لترى كيف يعمل التحقق مباشرة.

الخاتمة: بناء تجربة أفضل وأكثر أماناً

التحقق من صحة النماذج هو مهارة أساسية تجمع بين HTML للبناء، CSS للتصميم، و JavaScript للمنطق. بتطبيق ما تعلمته اليوم، يمكنك بناء نماذج أكثر احترافية وسهولة في الاستخدام، مما يحسن تجربة زوار موقعك. تذكر، الأمان يبدأ من المتصفح وينتهي في الخادم.

هل لديك أسئلة حول التحقق من النماذج؟ شاركنا في التعليقات!

✍️ كتب بواسطة KamalZone