Theory
Empty registrations kept arriving
FestConnect's organisers open the sheet and find rows with no name, no email, just an event. People pressed Register with blank fields, and the form sent anyway.
The fix is validation: before the form is allowed to submit, JavaScript checks that every required field is filled. If one is empty, it stops the submission and tells the user. This lesson does the most basic and most important check: is everything filled in?
Theory
The bouncer at the door
A form's submit is a door to the server. Validation is the bouncer: before anyone passes, they check the essentials ('name? email? event?'). Miss one and the bouncer blocks the door and points at what is missing. Only a complete guest gets through. Without a bouncer, blank and broken entries walk straight in.
Theory
The three steps
For each required field:
1. Read its value from the DOM: document.getElementById("email").value.
2. Trim it: value.trim(), so a field of only spaces counts as empty.
3. Check: if it is "", show a message and stop the submit.
Stop the submit with `e.preventDefault()` (in an addEventListener handler) or by `return false` (from an onsubmit attribute). Skip this and the form sends despite your check.
Practical
FestConnect register() checks required fields
<form id="reg" onsubmit="return validate()">
<input id="name" placeholder="Name">
<input id="email" placeholder="Email">
<input id="event" placeholder="Event">
<button type="submit">Register</button>
</form>
<script>
function validate() {
let ids = ["name", "email", "event"];
for (let i = 0; i < ids.length; i++) {
let value = document.getElementById(ids[i]).value.trim();
if (value === "") {
alert(ids[i] + " is required");
return false; // STOP the submit
}
}
return true; // all filled: allow submit
}
</script>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Why trim() before checking?
A user types three spaces into the Name box and presses Register. Without trim(), does your if (value === "") catch it? What does trim() change?
Show the answer
Without trim(), the value is " " (three spaces), which is not equal to "", so the check passes and a blank-looking name gets through. value.trim() removes the surrounding spaces, turning " " into "", so the empty check now catches it. Whitespace-only input is the classic way blank data sneaks past naive validation; trim first, always.
Quiz
Your validate() correctly alerts 'email is required', but the form still submits and reloads the page anyway. What did you forget?
- To stop the submit: return false (onsubmit) or e.preventDefault()
- To add more input fields
- To use getElementsByName instead of getElementById
- To convert the value to a number
Show the answer
To stop the submit: return false (onsubmit) or e.preventDefault()
Detecting the empty field is only half the job; you must also stop the default submission, with return false from an onsubmit handler or e.preventDefault() in an addEventListener (A). Without that, the browser submits regardless of your alert. More fields (B) or a different selector (C) do not stop submission, and numbers (D) are irrelevant to a required-text check. Detect, then block: both steps are needed.
Watch out
Validation traps
1. Not stopping the submit: an alert without return false / preventDefault() lets the form send anyway.
2. Not trimming: spaces-only fields slip through an === "" check.
3. Trusting the client: this check is for a good user experience. A user can disable JavaScript, so the server must validate again before saving (the client/server rule from Unit 3). Client validation is a courtesy, not security.
Theory
Next: is it the RIGHT kind of data?
'Filled in' is step one. But name could be "asdf" and email could be "hello" with no @. The next lesson adds format validation: checking an email looks like an email, a mobile number is 10 digits, a name has no digits. Same register() function, stronger checks, using the string methods from Unit 3.
Summary
Key takeaways
- Basic validation confirms every required field is filled before the form submits.
- For each field: read .value, trim() it, and if it is "" show a message and stop.
- Stop the submit with return false (onsubmit) or e.preventDefault() (addEventListener), or the form sends anyway.
- Always trim first: whitespace-only input otherwise passes an empty check.
- Client validation is for UX only; the server must re-validate for security.
- Memory hook: validation is the bouncer at the door.