Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<form> <input type="text" required minlength="3" maxlength="50" placeholder="Username (3-50 chars)"> <input type="email" required placeholder="Email"> <input type="password" required pattern="(?=.*\d)(?=.*[a-z]).{8,}" title="8+ chars, at least 1 number and 1 letter"> <input type="number" min="18" max="120" required> <button type="submit">Submit</button> </form> <!-- Custom validation message --> <script> document.querySelector("input").addEventListener("invalid", e => { e.target.setCustomValidity("Please enter a valid username."); }); </script>
Result
Open