← CodePrimer
JavaScript
Beginner
Forms
Block empty form fields in JS
How do I stop submit when a field is blank?
preventDefault + trim check.
document.querySelector('#signup')?.addEventListener('submit', (e) => {
const name = document.querySelector('#name');
if (! name.value.trim()) {
e.preventDefault();
alert('Name is required');
}
});Notes
Still validate again on the server in PHP.
Keywords: validation · preventDefault · required · form
Related
JavaScript
document.getElementById
How do I select one element by id?
JavaScript
document.querySelector
How do I select with a CSS selector?
JavaScript
document.querySelectorAll
How do I select every matching element?
JavaScript
addEventListener click
How do I make a button show an alert?
JavaScript
Arrow function event listener
Can I use an arrow function for events?
JavaScript
Live input event
How do I react as the user types?