Native Form Validation
HTML5 attributes like required, pattern, min, max, and minlength validate inputs without JavaScript.
HTML
Intermediate
4 min read
HTML5 Form Validation
Example
<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> Pro Tip
HTML5 validation is the first line of defence — always add server-side validation too.