html/lab5/task9/script.js - master - ChizhenkoM/web-static-labs

html/lab5/task9/script.js
213 строк7 KB
ChizhenkoM
lab8
17 апр 2026, 08:29
17 апр 2026, 08:2972323f6
'use strict';

const form = document.getElementById('registerForm');
const deliveryCheckbox = document.getElementById('delivery');
const addressGroup = document.getElementById('addressGroup');
const resultDiv = document.getElementById('formResult');

function validateLogin() {
    const login = document.getElementById('login');
    const error = document.getElementById('loginError');
    const value = login.value.trim();
    
    if (!value) {
        error.textContent = 'Логин обязателен';
        login.classList.add('error');
        login.classList.remove('valid');
        return false;
    }
    if (value.length < 5) {
        error.textContent = 'Логин должен быть не менее 5 символов';
        login.classList.add('error');
        login.classList.remove('valid');
        return false;
    }
    if (value.length > 20) {
        error.textContent = 'Логин не должен превышать 20 символов';
        login.classList.add('error');
        login.classList.remove('valid');
        return false;
    }
    error.textContent = '';
    login.classList.remove('error');
    login.classList.add('valid');
    return true;
}

function validatePassword() {
    const password = document.getElementById('password');
    const error = document.getElementById('passwordError');
    const value = password.value;
    
    if (!value) {
        error.textContent = 'Пароль обязателен';
        password.classList.add('error');
        password.classList.remove('valid');
        return false;
    }
    if (value.length < 5) {
        error.textContent = 'Пароль должен быть не менее 5 символов';
        password.classList.add('error');
        password.classList.remove('valid');
        return false;
    }
    if (value.length > 12) {
        error.textContent = 'Пароль не должен превышать 12 символов';
        password.classList.add('error');
        password.classList.remove('valid');
        return false;
    }
    error.textContent = '';
    password.classList.remove('error');
    password.classList.add('valid');
    return true;
}

function validateConfirmPassword() {
    const password = document.getElementById('password').value;
    const confirm = document.getElementById('confirmPassword');
    const error = document.getElementById('confirmError');
    
    if (password !== confirm.value) {
        error.textContent = 'Пароли не совпадают';
        confirm.classList.add('error');
        confirm.classList.remove('valid');
        return false;
    }
    error.textContent = '';
    confirm.classList.remove('error');
    confirm.classList.add('valid');
    return true;
}

function validateAge() {
    const age = document.getElementById('age');
    const error = document.getElementById('ageError');
    const hint = document.getElementById('ageHint');
    const value = parseInt(age.value);
    
    if (isNaN(value)) {
        error.textContent = 'Возраст обязателен';
        age.classList.add('error');
        age.classList.remove('valid');
        hint.textContent = '';
        return false;
    }
    if (value < 14) {
        error.textContent = 'Возраст слишком мал';
        age.classList.add('error');
        age.classList.remove('valid');
        hint.textContent = '';
        return false;
    }
    if (value > 120) {
        error.textContent = 'Возраст слишком велик';
        age.classList.add('error');
        age.classList.remove('valid');
        hint.textContent = '';
        return false;
    }
    error.textContent = '';
    age.classList.remove('error');
    age.classList.add('valid');
    
    if (value >= 14 && value <= 17) {
        hint.textContent = 'Требуется согласие родителей';
    } else {
        hint.textContent = '';
    }
    return true;
}

function validateCity() {
    const city = document.getElementById('city');
    const error = document.getElementById('cityError');
    
    if (!city.value) {
        error.textContent = 'Выберите город';
        city.classList.add('error');
        city.classList.remove('valid');
        return false;
    }
    error.textContent = '';
    city.classList.remove('error');
    city.classList.add('valid');
    return true;
}

function validateAddress() {
    if (!deliveryCheckbox.checked) return true;
    
    const address = document.getElementById('address');
    const error = document.getElementById('addressError');
    
    if (!address.value.trim()) {
        error.textContent = 'Адрес доставки обязателен';
        address.classList.add('error');
        address.classList.remove('valid');
        return false;
    }
    error.textContent = '';
    address.classList.remove('error');
    address.classList.add('valid');
    return true;
}

deliveryCheckbox.addEventListener('change', () => {
    if (deliveryCheckbox.checked) {
        addressGroup.style.display = 'block';
    } else {
        addressGroup.style.display = 'none';
    }
});

document.getElementById('login').addEventListener('input', () => {
    validateLogin();
    resultDiv.classList.add('hidden');
});
document.getElementById('password').addEventListener('input', () => {
    validatePassword();
    validateConfirmPassword();
    resultDiv.classList.add('hidden');
});
document.getElementById('confirmPassword').addEventListener('input', () => {
    validateConfirmPassword();
    resultDiv.classList.add('hidden');
});
document.getElementById('age').addEventListener('input', () => {
    validateAge();
    resultDiv.classList.add('hidden');
});
document.getElementById('city').addEventListener('change', () => {
    validateCity();
    resultDiv.classList.add('hidden');
});

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const isLoginValid = validateLogin();
    const isPasswordValid = validatePassword();
    const isConfirmValid = validateConfirmPassword();
    const isAgeValid = validateAge();
    const isCityValid = validateCity();
    const isAddressValid = validateAddress();
    
    if (isLoginValid && isPasswordValid && isConfirmValid && isAgeValid && isCityValid && isAddressValid) {
        resultDiv.textContent = 'Регистрация успешна!';
        resultDiv.className = 'result success';
        resultDiv.classList.remove('hidden');
        console.log('Данные формы:', {
            login: document.getElementById('login').value,
            password: document.getElementById('password').value,
            age: document.getElementById('age').value,
            city: document.getElementById('city').options[document.getElementById('city').selectedIndex]?.text,
            delivery: deliveryCheckbox.checked,
            address: deliveryCheckbox.checked ? document.getElementById('address').value : null
        });
    } else {
        resultDiv.textContent = 'Пожалуйста, исправьте ошибки в форме';
        resultDiv.className = 'result error';
        resultDiv.classList.remove('hidden');
    }
});