Form Validation in HTML5

Form Validation in HTML5

Validation ensures users enter correct and complete data before submitting the form. HTML5 introduced built-in validation attributes so developers don’t always need JavaScript.

required

Makes a field mandatory.

Example :

<input type="text" name="username" required>

pattern

Specifies a regular expression to match input.

Example :

<input type="text" name="zipcode" pattern="[0-9]{6}" placeholder="6-digit ZIP" required>

---

minlength / maxlength

Defines the minimum and maximum number of characters.

Example :

<input type="password" minlength="6" maxlength="12" required>

---

min / max

Sets minimum and maximum values for numbers, dates, etc.

Example :

<input type="number" min="18" max="60" required>

---

step

Defines step intervals for numeric inputs.

Example :

<input type="number" min="0" max="100" step="5">

---

type-based Validation

Certain <input> types have automatic validation:

• type="email" → must be a valid email ([email protected])

• type="url" → must be a valid URL (https://example.com)

• type="number" → must be numeric

• type="date" → must be a valid date

Example:

<input type="email" placeholder="Enter your email" required>

---

novalidate

Prevents HTML5 validation for the entire form.

Example :

<form action="submit.php" method="post" novalidate>

Complete Example of Form Validation

<form action="submit.php" method="post">
  <!-- Required field -->
  Name: <input type="text" name="name" required><br><br>

  <!-- Email validation -->
  Email: <input type="email" name="email" required><br><br>

  <!-- Password with length -->
  Password: <input type="password" minlength="6" maxlength="12" required><br><br>

  <!-- Number with min, max, step -->
  Age: <input type="number" min="18" max="60" step="1" required><br><br>

  <!-- Pattern -->
  Zip Code: <input type="text" pattern="[0-9]{6}" placeholder="6-digit code" required><br><br>

  <input type="submit" value="Submit">
</form>

Output :

HTML Form Flowchart