<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Форма регистрации</title> <style> .error { color: red; } </style> </head> <body> <h1>Форма регистрации</h1> <form id="registrationForm"> <div> <label for="firstName">Имя:</label><br> <input type="text" id="firstName" name="firstName" required> <div class="error" id="firstNameError"></div> </div> <div> <label for="lastName">Фамилия:</label><br> <input type="text" id="lastName" name="lastName" required> <div class="error" id="lastNameError"></div> </div> <div> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required> <div class="error" id="emailError"></div> </div> <div> <label for="age">Возраст:</label><br> <input type="number" id="age" name="age" required> <div class="error" id="ageError"></div> </div> <div> <label for="about">О себе:</label><br> <input type="text" id="about" name="about"> </div> <br> <button type="submit">Отправить</button> </form> <script> document.getElementById('registrationForm').onsubmit = function(event) { event.preventDefault(); let valid = true; document.querySelectorAll('.error').forEach(error => { error.textContent = ''; }); const firstName = document.getElementById('firstName').value.trim(); if (!firstName) { document.getElementById('firstNameError').textContent = 'Имя обязательно для заполнения.'; valid = false; } const lastName = document.getElementById('lastName').value.trim(); if (!lastName) { document.getElementById('lastNameError').textContent = 'Фамилия обязательна для заполнения.'; valid = false; } const email = document.getElementById('email').value.trim(); const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!email) { document.getElementById('emailError').textContent = 'Email обязателен для заполнения.'; valid = false; } else if (!emailPattern.test(email)) { document.getElementById('emailError').textContent = 'Введите правильный email.'; valid = false; } const age = document.getElementById('age').value.trim(); if (!age || isNaN(age)) { document.getElementById('ageError').textContent = 'Возраст обязателен для заполнения и должен быть числом.'; valid = false; } if (valid) { alert('Форма успешно отправлена!'); } } </script> </body> </html>
Results:
Форма регистрации
Форма регистрации
Имя:
Фамилия:
Email:
Возраст:
О себе:
Отправить