Postnov/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<style>
  .error {
    border: 1px solid red;
  }

  .success {
    border: 1px solid green;
  }
</style>


<form action="" class="form-booking">
  <input type="text" placeholder="Input placeholder"><br>
  <input type="text" required placeholder="*required Input placeholder"><br>
  <input type="text" placeholder="Input placeholder"><br>
  <input type="text" required placeholder="*required Input placeholder"><br>
  <input type="text" placeholder="Input placeholder"><br>
  <button type="submit">Send</button>
</form>


<script>
  //function
  function checkRequiredBeforeSend(selector) {
    var field = document.querySelectorAll(selector);

    field.forEach(function(elem,i) {
      checkRequiredFocusout(elem);
    })

  }


  //function focusout
  function checkRequiredFocusout(elem) {
    if (elem.value == '') {
      elem.classList.remove('success');
      elem.classList.add('error');
    }else {
      elem.classList.remove('error');
      elem.classList.add('success')
    }
  }


  //event focusout

  var fieldRequired = document.querySelectorAll('.form-booking input[required]');

  fieldRequired.forEach(function(elem,i) {
    elem.addEventListener('focusout', function() {
      checkRequiredFocusout(elem)
    })
  })


  //event send

  document.querySelector('.form-booking').addEventListener('submit', function(e) {
    e.preventDefault();
    checkRequiredBeforeSend('.form-booking input[required]');
  })
</script>


</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>

	<style>
	.error {
	border: 1px solid red;
	}

	.success {
	border: 1px solid green;
	}
	</style>


	<form action="" class="form-booking">
	<input type="text" placeholder="Input placeholder"><br>
	<input type="text" required placeholder="*required Input placeholder"><br>
	<input type="text" placeholder="Input placeholder"><br>
	<input type="text" required placeholder="*required Input placeholder"><br>
	<input type="text" placeholder="Input placeholder"><br>
	<button type="submit">Send</button>
	</form>



	<script>
	//function
	function checkRequiredBeforeSend(selector) {
	var field = document.querySelectorAll(selector);

	field.forEach(function(elem,i) {
	checkRequiredFocusout(elem);
	})

	}


	//function focusout
	function checkRequiredFocusout(elem) {
	if (elem.value == '') {
	elem.classList.remove('success');
	elem.classList.add('error');
	}else {
	elem.classList.remove('error');
	elem.classList.add('success')
	}
	}




	//event focusout

	var fieldRequired = document.querySelectorAll('.form-booking input[required]');

	fieldRequired.forEach(function(elem,i) {
	elem.addEventListener('focusout', function() {
	checkRequiredFocusout(elem)
	})
	})



	//event send

	document.querySelector('.form-booking').addEventListener('submit', function(e) {
	e.preventDefault();
	checkRequiredBeforeSend('.form-booking input[required]');
	})
	</script>



	</body>
	</html>