HTML Form Validation

8. The novalidate Attribute

<form action="/search" method="get" novalidate>
  <label for="query">Search</label>
  <input id="query" name="q" required>
  <button type="submit">Search</button>
</form>

novalidate disables the browser's automatic constraint validation when the form is submitted. It should be used only when the application deliberately handles validation another way.

9. Server-Side Validation Is Essential

Client-side checks improve usability but can be bypassed by browser developer tools, scripts or direct HTTP requests. A secure application must validate incoming data on the server.

• Check required fields and data types.
• Enforce length and range limits.
• Verify allowed options against server-side rules.
• Validate permissions and business rules.
• Use appropriate output escaping and database protections.

10. Complete Example

<form action="/signup" method="post">
  <label for="full-name">Full Name</label>
  <input id="full-name" name="full_name" type="text"
    minlength="2" maxlength="80" required>

  <label for="signup-email">Email</label>
  <input id="signup-email" name="email" type="email" required>

  <label for="age">Age</label>
  <input id="age" name="age" type="number"
    min="18" max="100" required>

  <label for="password">Password</label>
  <input id="password" name="password" type="password"
    minlength="12" required>

  <button type="submit">Create Account</button>
</form>

This example demonstrates HTML constraints only. A real application should use secure password handling, server-side validation, and appropriate account security controls.

Common Mistakes

• Assuming HTML validation prevents malicious requests.
• Using type="number" for data that is an identifier, such as a phone number.
• Using a pattern that rejects valid international input.
• Believing that type="email" verifies the existence of an email address.
• Using novalidate without providing an alternative validation process.

Practice Exercises

1. Create a required username field with a minimum length of 3 and maximum of 20.
2. Create an age field that accepts values from 18 through 60.
3. Create a price field that allows decimal increments of 0.01.
4. Create a product-code field requiring exactly three uppercase letters.
5. Explain why server-side validation is necessary even when required is present.

Revision Quiz

1. Which attribute makes a field mandatory?
2. Which attributes define minimum and maximum text lengths?
3. Which attribute defines permitted increments for supported controls?
4. Does type="email" verify that an inbox exists?
5. What does novalidate do?
6. Can client-side validation be bypassed?

Answer Key and Explanations

1. required — It prevents ordinary submission when the control fails the required constraint.
2. minlength and maxlength — They constrain text length.
3. step — It defines permitted increments.
4. No. It checks basic email syntax, not mailbox existence.
5. Disables automatic form constraint validation on submission — Use it only when another validation approach is intended.
6. Yes. Requests can be sent without relying on the browser's form interface, so the server must validate them.