Валидация в форме имени, фамилии и возраста

185

19 февраля 2018, 04:28

Есть форма валидации. Имя и фамилия должны быть без пробелов, с большой буквы и минимум две буквы, а для возраста задать интервал от 18 до 100. Как это сделать?

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') 
 
 
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 (!fields[i].value) { 
      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) 
  console.log('form_age: ', form_age.value) 
  console.log('form_email: ', form_email.value) 
})

input { 
  margin-top: 10px; 
}

<form class='formWithValidation'> 
  <div> 
    <label for='form_fname'>Имя: </label> 
    <input type='text' class='form_name field' name='first_name'> 
  </div> 
  <div> 
    <label for='form_surname'>Фамилия: </label> 
    <input type='text' class='form_surname field' name='second_name'> 
  </div> 
  <div> 
    <label for='form_age'>Возраст: </label> 
    <input type='text' class='form_age field' name='age'> 
  </div> 
  <div> 
    <label for='form_email'>Email: </label> 
    <input type='email' class='form_email field' name='email'> 
  </div> 
  <div> 
    <input type="submit" class="validateBtn" value='Submit'> 
  </div> 
</form>

Answer 1

По хорошему бы конечно ещё и почту проверять ...

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'); 
 
 
/** 
 * Собственно функция которая принимает input, 
 * а потом выбирает тип валидации в зависимости от атрибута data-validationType этого инпута. 
 * Дальше дело техники - какой паттерн подобрать, в задаче спрашивается про возраст и имя ... 
 * Возвращает булевое значение. 
 */ 
const validation = input => { 
  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) 
  console.log('form_age: ', form_age.value) 
  console.log('form_email: ', form_email.value) 
});

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<style> 
		input{ 
			margin-top: 10px; 
		} 
	</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> 
 
		<div> 
			<input type="submit" class="validateBtn" value='Submit'> 
		</div> 
 
</form> 
 
 
	<script src="main.js"></script> 
</body> 
</html>