Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Form validation ensures users enter correct and complete data. Validate on both client (better UX) and server (security)!
form.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
// Check if empty
if (!name) {
alert('Name is required!');
return;
}
if (!email) {
alert('Email is required!');
return;
}
console.log('Form is valid!');
});function validateEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
form.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.querySelector('#email').value;
if (!validateEmail(email)) {
alert('Invalid email format!');
return;
}
console.log('Valid email:', email);
});function validatePassword(password) {
const minLength = password.length >= 8;
const hasUpper = /[A-Z]/.test(password);
const hasLower = /[a-z]/.test(password);
const hasNumber = /[0-9]/.test(password);
return {
valid: minLength && hasUpper && hasLower && hasNumber,
minLength, hasUpper, hasLower, hasNumber
};
}
input.addEventListener('input', function(e) {
const result = validatePassword(e.target.value);
updateChecklist(result);
});<!-- HTML5 Validation Attributes -->
<input type="email" required>
<input type="number" min="1" max="100">
<input type="text" pattern="[A-Za-z]{3,}">
<!-- JavaScript to check validity -->
form.addEventListener('submit', function(e) {
if (!form.checkValidity()) {
e.preventDefault();
alert('Please fix errors!');
}
});!valuevalue.length >= 5value.length <= 50/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$//^[0-9]+$/required - Field must be filledmin/max - Numeric rangeminlength/maxlength - Text lengthpattern - Regex validationtype - email, url, number, etc./[A-Z]//[a-z]//[0-9]//[!@#$%^&*]/length >= 8form.checkValidity() - Check allinput.validity.valid - Check oneinput.setCustomValidity() - Custom message