Validation checks that user input is complete and correct before it is processed. There are two layers, and you need both:
- Client-side validation (HTML and JavaScript): instant feedback, better user experience.
- Server-side validation (PHP, Unit 10): essential for security, because users can bypass or disable browser checks.
Step 1: HTML5 built-in validation: required, type='email', minlength, maxlength, min, max, pattern='[0-9]{10}', with CSS :valid and :invalid.
Step 2: JavaScript custom validation:
HTML
<form id='regForm' novalidate>
<label>Name <input type='text' id='name'></label>
<span class='error' id='nameErr'></span><br>
<label>Email <input type='text' id='email'></label>
<span class='error' id='emailErr'></span><br>
<label>Phone <input type='text' id='phone'></label>
<span class='error' id='phoneErr'></span><br>
<label>Password <input type='password' id='pw'></label>
<span class='error' id='pwErr'></span><br>
<label>Confirm <input type='password' id='pw2'></label>
<span class='error' id='pw2Err'></span><br>
<button type='submit'>Register</button>
</form>
<script>
const form = document.getElementById('regForm');
function setError(id, message) {
document.getElementById(id + 'Err').textContent = message;
return message === ''; // true means this field is OK
}
form.addEventListener('submit', function (e) {
let ok = true;
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
const pw = document.getElementById('pw').value;
const pw2 = document.getElementById('pw2').value;
// Regular expressions: patterns for text
const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
const phonePattern = /^0[0-9]{9}$/; // e.g. 0771234567
ok = setError('name', name.length < 3 ? 'Name must be at least 3 characters' : '') && ok;
ok = setError('email', !emailPattern.test(email) ? 'Enter a valid email' : '') && ok;
ok = setError('phone', !phonePattern.test(phone) ? 'Phone must be 10 digits starting with 0' : '') && ok;
ok = setError('pw', pw.length < 8 ? 'Password needs 8+ characters' : '') && ok;
ok = setError('pw2', pw !== pw2 ? 'Passwords do not match' : '') && ok;
if (!ok) {
e.preventDefault(); // stop the form from being sent
}
});
</script>Regular expression cheat sheet
| Symbol | Meaning |
|---|---|
^ and $ | Start and end of text |
[a-z], [0-9] | One character in the range |
\d, \w, \s | Digit, word character, whitespace |
+, *, ? | One or more, zero or more, optional |
{3,8} | Between 3 and 8 repeats |
. | Any character |
\. | A real dot (a backslash escapes a special character) |
(a|b) | Either a or b (alternation) |
Useful checks: all fields filled, length limits, numeric ranges, email and phone formats, password strength (upper, lower, digit), matching passwords, selected checkbox (terms), date not in the past. Give specific messages next to the field, not just an alert. Validate also on input or blur events for live feedback.
Check yourself. The questions for this part are on the 7.11 Review Questions page, with answers to check your work.