tborychowski · November 21, 2017 10:10
diff --git a/form-validation.html b/form-validation.html
 <!DOCTYPE html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="css/style.css">
 <style>
 html { height: 100%; }
 body {
  font-family: sans-serif;
  font-weight: 300;
  font-size: 20px;
  background: linear-gradient(to top, #e0e7ef, #eef2f7);
  min-height: 100%;
  color: #798594;
  line-height: 1.6;
 }

 form {
  background: #f8fafb;
  padding: 3em 1em;
  border-radius: 3px;
  box-shadow: 0 0.1em 0.4em #b7ccde;
  max-width: 15em;
  margin: 2em auto;
 }

 button, input, textarea, select {
  font: inherit;
  color: inherit;
  padding: 0.4em 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5em;
 }

 button { cursor: pointer; background-color: #e9f1ff; color: #7e93b7; }
 input { display: block; position: relative; z-index: 1; }
 input::placeholder { color: #bbb; }

 .invalid { box-shadow: 0 0.15em 0.15em -0.1em rgba(4, 4, 4, 0.1); }

 .error {
  display: none;
  margin-bottom: 0.5rem;
  margin-top: calc(-0.5rem - 4px);
  margin-left: 2px;
  margin-right: 2px;
  padding: calc(0.5rem + 4px) 0.6rem;
  background-color: #ffefeb;
  color: #b75a41;
  border: 1px solid #e6917a;
  border-radius: 0 0 4px 4px;
  animation: show-error .3s;
  font-size: 0.8em;
 }

 .invalid + .error { display: block; }

 @keyframes show-error {
  from { transform: translateY(-100%) scaleY(0.2); }
  to { transform: none; }
 }
 </style>
 </head>
 <body>
 <form>
  <input type="number" placeholder="Enter 42" min="42" max="42" required>
  <input type="email" placeholder="Enter your email" required>
  <button type="submit">Register</button>
 </form>


 <script>
 // 1. Disable native validation UI with `noValidate`
 // 2. On submit, run evaluation and prevent if necessary
 const form = document.querySelector('form');
 form.noValidate = true;
 form.onsubmit = evt => {
 	if (!form.checkValidity()) evt.preventDefault();
 };


 for (let field of form.querySelectorAll('input, textarea, select')) {
 	// Add error container
 	field.insertAdjacentHTML('afterend', '<div class="error"></div>');

 	// Show message on `invalid` event
 	field.oninvalid = () => {
 		field.classList.add('invalid');
 		field.nextSibling.textContent = field.validationMessage;

 		// Reset invalid state & error message on `input` event, trigger validation check
 		field.oninput = () => {
 			field.oninput = null;
 			field.nextSibling.textContent = '';
 			field.classList.remove('invalid');
 			field.checkValidity();
 		};
 	};
 }
 </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
	<style>
	html { height: 100%; }
	body {
	font-family: sans-serif;
	font-weight: 300;
	font-size: 20px;
	background: linear-gradient(to top, #e0e7ef, #eef2f7);
	min-height: 100%;
	color: #798594;
	line-height: 1.6;
	}

	form {
	background: #f8fafb;
	padding: 3em 1em;
	border-radius: 3px;
	box-shadow: 0 0.1em 0.4em #b7ccde;
	max-width: 15em;
	margin: 2em auto;
	}

	button, input, textarea, select {
	font: inherit;
	color: inherit;
	padding: 0.4em 0.6em;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.5em;
	}

	button { cursor: pointer; background-color: #e9f1ff; color: #7e93b7; }
	input { display: block; position: relative; z-index: 1; }
	input::placeholder { color: #bbb; }

	.invalid { box-shadow: 0 0.15em 0.15em -0.1em rgba(4, 4, 4, 0.1); }

	.error {
	display: none;
	margin-bottom: 0.5rem;
	margin-top: calc(-0.5rem - 4px);
	margin-left: 2px;
	margin-right: 2px;
	padding: calc(0.5rem + 4px) 0.6rem;
	background-color: #ffefeb;
	color: #b75a41;
	border: 1px solid #e6917a;
	border-radius: 0 0 4px 4px;
	animation: show-error .3s;
	font-size: 0.8em;
	}

	.invalid + .error { display: block; }

	@keyframes show-error {
	from { transform: translateY(-100%) scaleY(0.2); }
	to { transform: none; }
	}
	</style>
	</head>
	<body>
	<form>
	<input type="number" placeholder="Enter 42" min="42" max="42" required>
	<input type="email" placeholder="Enter your email" required>
	<button type="submit">Register</button>
	</form>


	<script>
	// 1. Disable native validation UI with `noValidate`
	// 2. On submit, run evaluation and prevent if necessary
	const form = document.querySelector('form');
	form.noValidate = true;
	form.onsubmit = evt => {
	if (!form.checkValidity()) evt.preventDefault();
	};


	for (let field of form.querySelectorAll('input, textarea, select')) {
	// Add error container
	field.insertAdjacentHTML('afterend', '<div class="error"></div>');

	// Show message on `invalid` event
	field.oninvalid = () => {
	field.classList.add('invalid');
	field.nextSibling.textContent = field.validationMessage;

	// Reset invalid state & error message on `input` event, trigger validation check
	field.oninput = () => {
	field.oninput = null;
	field.nextSibling.textContent = '';
	field.classList.remove('invalid');
	field.checkValidity();
	};
	};
	}
	</script>
	</body>