[monster200214]

<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>