adyngom/inputtabs.html

## inputtabs.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AutoTab</title>
	<style>
		body {
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  			color: pink;
		}
		input:invalid {
		    border: 1px dotted red;
		}
		.autotabs {
			margin-bottom: 1em;
		}
	</style>
</head>
<body>
	<div class="input-wrapper" id="input-wrapper">
		<form action="#" id="testForm" novalidate="novalidate" onsubmit="checkForm()">
			<div class="autotabs">
				<input type="text" minlength="2" maxlength="4" placeholder="maximum: 4" required>
				<input type="text" maxlength="2" placeholder="maximum: 2">
				<input type="text" maxlength="3" placeholder="maximum: 3">
				<input type="text" maxlength="4" placeholder="maximum: 4">
			</div>

			<div class="autotabs">
				<input type="text" maxlength="3" placeholder="maximum: 3">
				<input type="text" maxlength="2" placeholder="maximum: 2">
				<input type="text" maxlength="4" placeholder="maximum: 4">
			</div>
			<div>
				<button type="submit" id="submitBtn" onclick="checkForm(event)" disabled="disabled">Submit</button>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		const testForm = document.forms['testForm'];
		const submitBtn = document.getElementById('submitBtn');

		let formValid = false;
		console.log(formValid);
		Array.from(document.querySelectorAll(".autotabs > input"))
		.map(function(input, idx, wrapper) {
				input.addEventListener("keyup", () => {
					formValid = (document.querySelectorAll("input:invalid").length > 0) ? false : true;
					if(formValid) {
						submitBtn.disabled = false;
					} else {
						submitBtn.disabled = true;
					}
					console.log(input.validity.valid);
					if(input.value.length === input.maxLength) {
						if(wrapper[idx + 1]) {
							wrapper[idx + 1].focus();
						}
					}
				});
			});

		function checkForm(ev) {
			ev.preventDefault();
			console.log(testForm)
		}

	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>AutoTab</title>
	<style>
	body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: pink;
	}
	input:invalid {
	border: 1px dotted red;
	}
	.autotabs {
	margin-bottom: 1em;
	}
	</style>
	</head>
	<body>
	<div class="input-wrapper" id="input-wrapper">
	<form action="#" id="testForm" novalidate="novalidate" onsubmit="checkForm()">
	<div class="autotabs">
	<input type="text" minlength="2" maxlength="4" placeholder="maximum: 4" required>
	<input type="text" maxlength="2" placeholder="maximum: 2">
	<input type="text" maxlength="3" placeholder="maximum: 3">
	<input type="text" maxlength="4" placeholder="maximum: 4">
	</div>

	<div class="autotabs">
	<input type="text" maxlength="3" placeholder="maximum: 3">
	<input type="text" maxlength="2" placeholder="maximum: 2">
	<input type="text" maxlength="4" placeholder="maximum: 4">
	</div>
	<div>
	<button type="submit" id="submitBtn" onclick="checkForm(event)" disabled="disabled">Submit</button>
	</div>
	</form>
	</div>
	<script type="text/javascript">
	const testForm = document.forms['testForm'];
	const submitBtn = document.getElementById('submitBtn');

	let formValid = false;
	console.log(formValid);
	Array.from(document.querySelectorAll(".autotabs > input"))
	.map(function(input, idx, wrapper) {
	input.addEventListener("keyup", () => {
	formValid = (document.querySelectorAll("input:invalid").length > 0) ? false : true;
	if(formValid) {
	submitBtn.disabled = false;
	} else {
	submitBtn.disabled = true;
	}
	console.log(input.validity.valid);
	if(input.value.length === input.maxLength) {
	if(wrapper[idx + 1]) {
	wrapper[idx + 1].focus();
	}
	}
	});
	});

	function checkForm(ev) {
	ev.preventDefault();
	console.log(testForm)
	}

	</script>
	</body>
	</html>