---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Бронирование книги</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .form-group { margin-bottom: 15px; }
        label { font-weight: bold; display: block; margin-bottom: 5px; }
        input { padding: 8px; width: 100%; max-width: 300px; box-sizing: border-box; }
        input.invalid { border: 2px solid red; background-color: #ffe6e6; }
        .error-text { color: red; font-size: 0.85em; display: none; margin-top: 3px; }
        .error-text.active { display: block; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #45a049; }
    </style>
</head>
<body>
    <h2>Форма бронирования книги</h2>

    <form id="bookingForm" novalidate>
        <div class="form-group">
            <label>ФИО Читателя:</label>
            <input type="text" id="readerName" placeholder="Иванов Иван Иванович">
            <div class="error-text" id="err-readerName">Поле обязательно. Допускаются только буквы и пробелы.</div>
        </div>

        <div class="form-group">
            <label>ID Книги:</label>
            <input type="text" id="bookId" placeholder="Например: 123">
            <div class="error-text" id="err-bookId">Поле обязательно. ID должен состоять только из цифр.</div>
        </div>

        <div class="form-group">
            <label>Email:</label>
            <input type="text" id="email" placeholder="user@gmail.com">
            <div class="error-text" id="err-email">Поле обязательно. Введите корректный email с символом @ и доменом.</div>
        </div>

        <div class="form-group">
            <label>Количество дней:</label>
            <input type="number" id="days" placeholder="От 1 до 30">
            <div class="error-text" id="err-days">Поле обязательно. Значение должно быть целым числом от 1 до 30.</div>
        </div>

        <button type="submit">Забронировать</button>
    </form>

    <script>
        document.getElementById('bookingForm').addEventListener('submit', function(event) {
            event.preventDefault();

            const readerName = document.getElementById('readerName').value.trim();
            const bookId = document.getElementById('bookId').value.trim();
            const email = document.getElementById('email').value.trim();
            const days = document.getElementById('days').value.trim();

            resetErrors();

            let isValid = true;

            if (readerName === "") { showError('readerName'); isValid = false; }
            if (bookId === "") { showError('bookId'); isValid = false; }
            if (email === "") { showError('email'); isValid = false; }
            if (days === "") { showError('days'); isValid = false; }

            const nameRegex = /^[А-Яа-яЁёA-Za-z\s\-]+$/;
            if (readerName !== "" && !nameRegex.test(readerName)) {
                showError('readerName');
                isValid = false;
            }

            const idRegex = /^\d+$/;
            if (bookId !== "" && !idRegex.test(bookId)) {
                showError('bookId');
                isValid = false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email !== "" && !emailRegex.test(email)) {
                showError('email');
                isValid = false;
            }

            if (days !== "") {
                const daysNum = Number(days);
                if (isNaN(daysNum) || !Number.isInteger(daysNum) || daysNum <= 0 || daysNum > 30) {
                    showError('days');
                    isValid = false;
                }
            }

            if (isValid) {
                alert("Успешно забронировано!");
            }
        });

        function showError(fieldId) {
            const input = document.getElementById(fieldId);
            const errorDiv = document.getElementById('err-' + fieldId);
            input.classList.add('invalid');
            if (errorDiv) errorDiv.classList.add('active');
        }

        function resetErrors() {
            const inputs = document.querySelectorAll('input');
            const errors = document.querySelectorAll('.error-text');
            inputs.forEach(input => input.classList.remove('invalid'));
            errors.forEach(err => err.classList.remove('active'));
        }
    </script>
</body>
</html>