tborychowski/form-validation.html

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