Client-side form validation with JavaScript – checking empty fields, email formats, passwords, and giving users feedback as they type.
Why JavaScript for form validation?
Client-side validation gives immediate feedback without a page reload. It is faster for the user, but it is not a substitute for server-side validation – you still need that for security and data integrity. JavaScript validation makes forms feel more responsive.
Basic validation techniques
Some common checks with plain JavaScript.
Checking for empty fields
Often you need to make sure required fields are not left blank.
Example – empty field validation
function validateForm() {
let name = document.getElementById("name").value;
if (name == "") {
alert("Name must be filled out");
return false;
}
}Validating email formats
Email fields need a recognisable format. Use a regular expression with the test method.
Example – email format validation
function validateEmail() {
let email = document.getElementById("email").value;
let emailFormat = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!emailFormat.test(email)) {
alert("You have entered an invalid email address!");
return false;
}
}Checking password strength
Password fields often need a minimum level of complexity.
Example – password strength validation
function validatePassword() {
let password = document.getElementById("password").value;
let passwordStrength = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
if (!passwordStrength.test(password)) {
alert("Password must be 6 to 20 characters and contain at least one numeric digit, one uppercase, and one lowercase letter");
return false;
}
}Advanced techniques
Beyond basic checks, you can validate as the user types and customise error messages.
Real-time validation feedback
Event listeners let you validate on every keystroke.
Example – real-time feedback
document.getElementById("email").addEventListener("input", function(event) {
let emailField = event.target;
let emailFormat = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (emailFormat.test(emailField.value)) {
emailField.style.borderColor = "green";
} else {
emailField.style.borderColor = "red";
}
});Custom error messages
HTML5’s setCustomValidity method works with JavaScript for tailored error text.
Example – custom error messages
document.getElementById("email").addEventListener("input", function(event) {
let emailField = event.target;
if (emailField.validity.typeMismatch) {
emailField.setCustomValidity("Please enter a valid email address.");
} else {
emailField.setCustomValidity("");
}
});Validating multiple conditions
Some fields need several rules checked at once.
Example – multiple conditions
function validateUsername() {
let username = document.getElementById("username").value;
if (username.length < 4 || username.length > 8) {
alert("Username must be between 4 and 8 characters");
return false;
}
// Additional conditions can be added here
}Tips for effective form validation
- Clear messages: tell the user what went wrong and how to fix it.
- Accessibility: make sure error messages work with screen readers.
- Visual feedback: colours, icons, or borders help, but do not rely on colour alone.
- Consistency: use the same validation approach across your forms.
Good validation catches mistakes early and keeps bad data out. Keep messages helpful, validate on the server as well, and the user gets a smoother experience.