Module 2 · JavaScript in the browser Lesson 5 of 15
Forms and validation
A form is the only place a visitor gives you data, so it is where most real bugs live — required fields, wrong formats, double submission.
The concept
A form is the only place a visitor gives you data, so it is the part that has to work. Wrap fields in a <form> with a real submit event, give every input a <label for=\"id\">, and use the right type — email, tel, number — so phones show the right keyboard.
Validate twice, for different reasons. In the browser, required and type stop honest mistakes before a request is sent. On the server, ALWAYS check again, because anyone can post to your endpoint with curl and skip your JavaScript entirely. Browser validation is a kindness; server validation is the security boundary.
<form>
<label for="phone">Mobile number</label>
<input id="phone" name="phone" type="tel" required
pattern="[0-9]{10}" placeholder="10 digits" />
<button type="submit">Get job alerts</button>
</form>
<!-- Try it: submit empty, then type 10 digits. The browser validates
before any request is sent. Your server must check the same rule
again, because anyone can skip this page entirely. -->Common mistakes
The mistake is showing a red border and nothing else. Say what is wrong and in which field: "Enter a phone number with 10 digits". And never clear the form after a failed submit — retyping four fields because of the fifth is how visitors leave.
Worked example
Validating an email in the browser saves a round trip, but the SERVER must validate it again: anyone can disable your script.
Your practice task
Build a job enquiry form with client-side validation for name, email and a 10-digit phone number, and show an inline error per field.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
A form is the only place a visitor gives you data, so it is the part that has to work.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.