JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<form onsubmit="return false;">
	<label for="passcode">What's the secret passcode?</label>
	<input id="passcode" 
		   type="password" 
		   placeholder="Your passcode" 
		   oninput="checkPasscode();"
		   required/>
	<button type="submit">Submit</button>
</form>

JavaScript

function checkPasscode() {
	var passcode = document.querySelector("#passcode");
	
	if (passcode.value != "cookies") {
		passcode.setCustomValidity("Wrong. It's 'cookies'.");
	} else {
		passcode.setCustomValidity(""); // be sure to leave this empty!
		alert("Correct!");
	}
}