Form Validation Basics

All in one: every validation rule, side by side

What this example compares

Two layers: client-side (the guard, can be bypassed) vs server-side (the lock, the final line of defence)
required on a text box vs a checkbox vs a radio group: typed vs ticked vs chosen
The format: type="email" (no @, student@college, a space, plus a pattern) vs type="url"
Numbers and dates: min vs max vs step, also on type="date"
Characters: minlength vs maxlength, compared with max
Your own rule: pattern="[A-Za-z]{3,}" with and without title
On submit: blocked (focus on the first invalid box) vs sent
Switching off: a normal form vs novalidate vs formnovalidate (Save draft)
Hint or value: placeholder vs value on a required box
A required select: empty first option vs none vs an option with no value
Not checked: readonly vs disabled vs a normal box
For later: setCustomValidity() for two matching passwords vs HTML alone

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see twelve panels of cards, each with a red or green outline and a verdict line. Panel 1: the name box is red (empty) beside the server's pseudo-code. Panel 2: all three required controls are red. Panel 3: student.college.edu, the address with a space, the full-domain pattern and www.lpu.in are red, while student@college and https://www.lpu.in are green. Panel 4: 17, 61, 12 and the 2027 date are red and 25 is green. Panel 5: the empty password and 99 with max="60" are red. Panel 6: only Rahul and the empty box are green. In panel 8 all three Title boxes are red, yet card B (novalidate) is sent when you press Publish. Panel 10: only the select with value="" is red. Panel 11: the readonly and disabled boxes say NOT CHECKED. The Console stays empty until a form is really sent; then it prints the same SENT message as the pop-up, for example SENT by the button 'Register' followed by name = Asha and email = asha@lpu.in for card 7B.

Quick check: in panel 8, card B's Title box still says INVALID, yet Publish sends it. Why, and which attribute would let only a "Save draft" button do that?

novalidate on the <form> does not change the rule (the box is still empty, so it still matches :invalid); it only stops the browser from blocking the send, for every button. To skip the checks for one button only, put formnovalidate on that button, as in card C.