Validation in Layers — what and why

The Built-in Validators (one-screen recap)

<input required>                          must not be empty
<input type="email">                      must look like a@b.c
<input type="url">                        must look like https://...
<input type="number" min="0" max="100">  must be 0-100
<input pattern="[6-9][0-9]{9}">           must match your regex
<input maxlength="6">                     can't exceed 6 chars
<input type="date" min="2008-01-01">      must be on/after that date

The browser validates on submit by default, halting submission and pointing at the problem. That is genuine validation, free, in every modern browser.

The Golden Rule — Client vs Server (the whole chapter in one box)

CLIENT-SIDE (HTML5/JS in the browser):
   ✅ instant feedback, great experience, no page reload
   ❌ can be BYPASSED in seconds (DevTools removes 'required',
      or a request is sent directly without the form)

SERVER-SIDE (PHP checking again after submit):
   ✅ the ONLY validation an attacker cannot skip
   ❌ needs a round-trip to the server

<form novalidate>   ← turns OFF browser validation (used when you do it all in JS)

Styling Invalid Fields — a taste of CSS validation

<style>
    input:required          { border-left: 3px solid orange; }
    input:invalid           { border-color: red;   }
    input:valid             { border-color: green; }
</style>

These :valid, :invalid, :required hooks are CSS pseudo-classes (full coverage in our CSS course). Even this tiny taste shows the payoff of choosing correct input types: the browser already KNOWS which fields are valid, so styling them is one line each.

Full Validated Admission Form

<form action="save-admission.php" method="post">
    <fieldset>
        <legend>Admission Form 2026</legend>

        <label for="nm">Student Name:</label>
        <input id="nm" name="student_name" required minlength="3"><br>

        <label for="em">Email:</label>
        <input id="em" type="email" name="email" required><br>

        <label for="mo">Mobile:</label>
        <input id="mo" type="tel" name="mobile"
               pattern="[6-9][0-9]{9}" title="10-digit mobile" required><br>

        <label for="cl">Class:</label>
        <select id="cl" name="class" required>
            <option value="">-- Select --</option>
            <option value="9">9</option><option value="10">10</option>
        </select><br>

        <label for="db">Date of Birth:</label>
        <input id="db" type="date" name="dob"
               min="2007-01-01" max="2016-12-31" required><br>

        <button type="submit">Submit Application</button>
    </fieldset>
</form>

Every field carries its own guard: required stops blanks, type="email" checks shape, pattern enforces the mobile format, select's required + empty first option forces a real choice, date min/max fences the admission age. This is a complete, professional front-end form — and on the server, PHP will check all of it once more.

Exam Corner