آموزش کار با رویدادهای فرم و اعتبارسنجی فرم‌ها در جاوا اسکریپت: راهنمای جامع

< ! DOCTYPE html >
< html lang="fa" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title > فرم ثبت نام < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        form {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            max-width: 400px;
            margin: auto;
        }
        input {
            display: block;
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        .error {
            color: red;
            font-size: 14px;
        }
    < / style >
< / head >
< body >
    < form id="signup-form" >
        < h1 > فرم ثبت نام < / h1 >
        < label for="name" > نام: < / label >
        < input type="text" id="name" name="name" required >
        < div class="error" id="name-error" > < / div >

        < label for="email" > ایمیل: < / label >
        < input type="email" id="email" name="email" required >
        < div class="error" id="email-error" > < / div >

        < label for="password" > رمز عبور: < / label >
        < input type="password" id="password" name="password" required minlength="6" >
        < div class="error" id="password-error" > < / div >

        < button type="submit" > ثبت نام < / button >
    < / form >

    < script src="app.js" > < / script >
< / body >
< / html >

// دسترسی به عناصر فرم
const form = document.getElementById('signup-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');

// دسترسی به پیام‌های خطا
const nameError = document.getElementById('name-error');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');

// اعتبارسنجی فرم هنگام ارسال
form.addEventListener('submit', function(event) {
    let isValid = true;

    // پاک کردن پیام‌های خطا
    nameError.textContent = '';
    emailError.textContent = '';
    passwordError.textContent = '';

    // اعتبارسنجی نام
    if (nameInput.value.trim() === '') {
        nameError.textContent = 'نام نمی‌تواند خالی باشد';
        isValid = false;
    }

    // اعتبارسنجی ایمیل
    if (!validateEmail(emailInput.value)) {
        emailError.textContent = 'لطفاً یک ایمیل معتبر وارد کنید';
        isValid = false;
    }

    // اعتبارسنجی رمز عبور
    if (passwordInput.value.length < 6) {
        passwordError.textContent = 'رمز عبور باید حداقل ۶ کاراکتر باشد';
        isValid = false;
    }

    // جلوگیری از ارسال فرم در صورت وجود خطا
    if (!isValid) {
        event.preventDefault();
    }
});

// تابع اعتبارسنجی ایمیل
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

// اعتبارسنجی همزمان فیلد نام
nameInput.addEventListener('input', function() {
    if (nameInput.value.trim() === '') {
        nameError.textContent = 'نام نمی‌تواند خالی باشد';
    } else {
        nameError.textContent = '';
    }
});

// اعتبارسنجی همزمان فیلد ایمیل
emailInput.addEventListener('input', function() {
    if (!validateEmail(emailInput.value)) {
        emailError.textContent = 'لطفاً یک ایمیل معتبر وارد کنید';
    } else {
        emailError.textContent = '';
    }
});

// اعتبارسنجی همزمان فیلد رمز عبور
passwordInput.addEventListener('input', function() {
    if (passwordInput.value.length < 6) {
        passwordError.textContent = 'رمز عبور باید حداقل ۶ کاراکتر باشد';
    } else {
        passwordError.textContent = '';
    }
});