الهدف التعليمي

تعلم كيفية التحقق من صحة البيانات المدخلة في النماذج باستخدام JavaScript لضمان إدخال بيانات صحيحة وسليمة.

النموذج التفاعلي

الشرح البرمجي

// Form Validation Logic
const form = document.getElementById('validationForm');
const username = document.getElementById('username');
const email = document.getElementById('email');
const usernameError = document.getElementById('usernameError');
const emailError = document.getElementById('emailError');

form.addEventListener('submit', (e) => {
    let valid = true;

    // Username Validation
    if (username.value.trim() === '') {
        usernameError.textContent = 'اسم المستخدم مطلوب.';
        valid = false;
    } else {
        usernameError.textContent = '';
    }

    // Email Validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email.value)) {
        emailError.textContent = 'البريد الإلكتروني غير صحيح.';
        valid = false;
    } else {
        emailError.textContent = '';
    }

    if (!valid) {
        e.preventDefault();
    }
});