<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>
</form>
</form>
<h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
<div class="hobby">
<form id="frm2" name="ffirs">
<p><input type="checkbox" id="hobby" name="sport" >Sport</p>
<p><input type="checkbox" id="hobby" name="school" >Учеба.</p>
<p><input type="checkbox" id="hobby" name="reading" >Чтение.</p>
<p><input type="checkbox" id="hobby" name="music" >Музыка.</p>
<p><input type="checkbox" id="hobby" name="dance" >Танцы.</p>
<p><input type="checkbox" id="hobby" name="drawing" >Рисование.</p>
<p><input type="checkbox" id="hobby" name="yoga" >Йога.</p>
</form>
</div>
<button onclick="validation()">Отправить данные</button>
<script>
let form = document.querySelector('.formWithValidation');
let validateBtn = form.querySelector('.validateBtn');
let form_name = form.querySelector('.form_name');
let form_surname = form.querySelector('.form_surname');
let form_age = form.querySelector('.form_age');
let form_email = form.querySelector('.form_email');
let fields = form.querySelectorAll('.field');
console.log('clicked on validate------------------------------------------------')
console.log('form_name: ', form_name.value)
console.log('form_surname: ', form_surname.value)
console.log('form_age: ', form_age.value)
console.log('form_email: ', form_email.value)
const validation = input => {
const checkboxes = frm2.querySelectorAll('input');
let count = 0;
checkboxes.forEach(c => c.checked ? count++ : 0);
if (count < 4) {
console.log("Правильно");
} else {
alert("Больше трех пунктов выбрать нельзя, выберите не больше трех");
}
const val = input.value;
switch(input.dataset.validationtype) {
case 'name': return /^[А-ЯЁ][а-яё]+$/.test(val);
case 'age' : return parseInt(val) >= 18 && parseInt(val) <= 100;
default : return val !== '';
}
}
form.addEventListener('submit', function (event) {
event.preventDefault()
let errors = form.querySelectorAll('.error')
for (let i = 0; i < errors.length; i++) {
errors[i].remove()
}
for (let i = 0; i < fields.length; i++) {
if (!validation(fields[i])) {
console.log('Поле нужно обязательно заполнить!', fields[i])
let error = document.createElement('div')
error.className='error'
error.style.color = 'red'
error.innerHTML = 'Поле нужно обязательно заполнить!'
form[i].parentElement.insertBefore(error, fields[i])
}
}
console.log('clicked on validate------------------------------------------------')
console.log('form_name: ', form_name.value)
console.log('form_surname: ', form_surname.value)
console.log('form_age: ', form_age.value)
console.log('form_email: ', form_email.value)
});
</script>
