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

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

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

function validateField(input, errorId, customMessage) {
    const errorSpan = document.getElementById(errorId);
    if (!input.validity.valid) {
        if (input.validity.valueMissing) {
            errorSpan.textContent = customMessage || 'Поле обязательно';
        } else if (input.validity.tooShort) {
            errorSpan.textContent = `Минимум ${input.minLength} символов`;
        } else if (input.validity.tooLong) {
            errorSpan.textContent = `Максимум ${input.maxLength} символов`;
        } else if (input.validity.rangeUnderflow) {
            errorSpan.textContent = `Значение не может быть меньше ${input.min}`;
        } else if (input.validity.rangeOverflow) {
            errorSpan.textContent = `Значение не может быть больше ${input.max}`;
        } else {
            errorSpan.textContent = 'Неверный формат';
        }
        return false;
    } else {
        errorSpan.textContent = '';
        return true;
    }
}

form.addEventListener('submit', (e) => {
    e.preventDefault();

    const login = document.getElementById('login');
    const password = document.getElementById('password');
    const age = document.getElementById('age');
    const city = document.getElementById('city');

    const isLoginValid = validateField(login, 'loginError', 'Логин обязателен');
    const isPasswordValid = validateField(password, 'passwordError', 'Пароль обязателен');
    const isAgeValid = validateField(age, 'ageError', 'Возраст обязателен');
    const isCityValid = validateField(city, 'cityError', 'Выберите город');

    if (isLoginValid && isPasswordValid && isAgeValid && isCityValid && city.value !== '') {
        resultDiv.textContent = 'Регистрация успешна!';
        resultDiv.className = 'result success';
        resultDiv.classList.remove('hidden');
        console.log('Данные формы:', {
            login: login.value,
            password: password.value,
            age: age.value,
            city: city.options[city.selectedIndex]?.text
        });
    } else {
        resultDiv.textContent = 'Пожалуйста, заполните все поля корректно';
        resultDiv.className = 'result error';
        resultDiv.classList.remove('hidden');
    }
});

form.addEventListener('input', () => {
    resultDiv.classList.add('hidden');
});

document.getElementById('login').addEventListener('input', () => {
    validateField(document.getElementById('login'), 'loginError', 'Логин обязателен');
});
document.getElementById('password').addEventListener('input', () => {
    validateField(document.getElementById('password'), 'passwordError', 'Пароль обязателен');
});
document.getElementById('age').addEventListener('input', () => {
    validateField(document.getElementById('age'), 'ageError', 'Возраст обязателен');
});
document.getElementById('city').addEventListener('change', () => {
    validateField(document.getElementById('city'), 'cityError', 'Выберите город');
});