HTML Form Validation

Form validation ensures that the data entered by a user meets the expected format and requirements before being submitted to the server. It helps maintain data accuracy, prevent errors, and enhance user experience.

HTML5 introduced built-in form validation features that work without the need for JavaScript.

What is Form Validation?

Form validation checks if the form fields are filled out correctly.
It can be of two types:

• Client-side validation – Performed by the browser using HTML5 attributes.
• Server-side validation – Performed by the server after submission (for extra security).

HTML5’s client-side validation is fast and prevents invalid data from being sent.

The required Attribute

Specifies that an input field must be filled before submitting the form.

<form>
  <label>Email:</label>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>

If the user tries to submit without filling the field, the browser shows an error message.

The pattern Attribute

Defines a regular expression pattern that the input value must match.

<form>
  <label>Username (letters only):</label>
  <input type="text" name="username" pattern="[A-Za-z]+" required>
  <input type="submit" value="Submit">
</form>

This ensures only alphabetic characters are allowed.

The min and max Attributes

Used for numeric and date inputs to specify minimum and maximum allowed values.

<form>
  <label>Age (18–60):</label>
  <input type="number" name="age" min="18" max="60" required>
  <input type="submit" value="Submit">
</form>

The step Attribute

Specifies the allowed intervals for numeric input.

<form>
  <label>Enter number (increments of 5):</label>
  <input type="number" name="quantity" step="5">
  <input type="submit">
</form>

The type Attribute and Validation

HTML input types such as email, url, and number automatically validate data.

<form>
  <label>Email:</label>
  <input type="email" name="email" required><br><br>

  <label>Website:</label>
  <input type="url" name="website" required><br><br>

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

If the entered text is not a valid email or URL, the browser displays an error.

The novalidate Attribute (Disable Validation)

You can disable form validation entirely using the novalidate attribute in the <form> tag.

<form novalidate>
  <input type="email" name="email" placeholder="Enter email">
  <input type="submit">
</form>

This is useful for testing or when you want to handle validation using JavaScript.

Using title to Display a Custom Message

When using the pattern attribute, you can use title to show a custom error hint.

<form>
  <label>Username:</label>
  <input type="text" name="username" pattern="[A-Za-z]+" title="Only letters are allowed">
  <input type="submit">
</form>

Complete Form Validation

<form action="/samples/form_processor.php" method="post">
  <label>Full Name:</label>
  <input type="text" name="fullname" required><br><br>

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

  <label>Age (18–60):</label>
  <input type="number" name="age" min="18" max="60" required><br><br>

  <label>Password:</label>
  <input type="password" name="password" minlength="6" maxlength="12" required><br><br>

  <label>Website:</label>
  <input type="url" name="website" required><br><br>

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

If the user leaves any required field blank or enters invalid data, the browser automatically prevents submission and shows relevant hints.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML form validation is a powerful feature that improves data accuracy and user experience without extra JavaScript.
Using attributes like required, pattern, min, max, and input types such as email or url, you can easily ensure correct and complete data entry.