monster200214,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.error {
color: #FF0000;
border: 1px solid #FF0000;
border-radius: 8px;
width: 280px;
padding: 4px;
}
</style>
</head>
<body>
<form class='formWithValidation'>
<div>
<label for='form_fname'>Имя: </label>
<input type='text' class='form_name field' name='first_name' data-validationType="name">
</div>
<div>
<label for='form_surname'>Фамилия: </label>
<input type='text' class='form_surname field' name='second_name' data-validationType="name">
</div>
<div>
<label for='form_age'>Возраст: </label>
<input type='text' class='form_age field' name='age' data-validationType="age">
</div>
<div>
<label for='form_email'>Email: </label>
<input type='email' class='form_email field' name='email'>
</div>
<h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
<div class="hobby">
<p><input type="checkbox" name="sport">Sport</p>
<p><input type="checkbox" name="school">Учеба.</p>
<p><input type="checkbox" name="reading">Чтение.</p>
<p><input type="checkbox" name="music">Музыка.</p>
<p><input type="checkbox" name="dance">Танцы.</p>
<p><input type="checkbox" name="drawing">Рисование.</p>
<p><input type="checkbox" name="yoga">Йога.</p>
</div>
<button>Отправить данные</button>
</form>
<script>
let form = document.querySelector('.formWithValidation');
let hobby = form.querySelector('.hobby');
let fields = form.querySelectorAll('.field');
const delay = 5000;
const showError = (elem, error) => {
let div = document.createElement('div')
div.className = 'error';
div.innerHTML = error;
elem.after(div);
window.setTimeout(_ => div.remove(), delay)
}
const validation = event => {
const checkboxes = hobby.querySelectorAll(':checked');
let validate = true;
let count = checkboxes.length;
let error;
if (count > 3) error = "Больше трех пунктов выбрать нельзя, выберите не больше трех";
if (!count) error = "Сделайте выбор, не более трёх пунктов";
if (error) {
showError(hobby, error);
validate = error = false;
};
for (let input of fields) {
const val = input.value;
switch (input.dataset.validationtype) {
case 'name':
/^[А-ЯЁ][а-яё]+$/.test(val) || (error = 'Поле нужно обязательно заполнить, первая буква заглавная, язык русский!');
break;
case 'age':
(parseInt(val) >= 18 && parseInt(val) <= 100) || (error = 'Поле нужно обязательно заполнить, числом от 18 до 100!');
break;
default:
val.trim() || (error = 'Поле нужно обязательно заполнить');
};
if (error) {
showError(input, error);
validate = error = false;
}
}
if (!validate) event.preventDefault();
}
form.addEventListener('submit', validation);
</script>
</body>
</html>