HTML Form Validation

Form validation is the process of checking whether the information entered by a user is valid and complete before the form is submitted.

1. What is Form Validation?

Form validation ensures that users enter information in the expected format. For example, a required field should not be empty and an email field should contain an appropriate email format.

<form>

    <label for="name">Name:</label>
    <input type="text"
           id="name"
           name="name"
           required>

    <button type="submit">Submit</button>

</form>

Here, the required attribute prevents the form from being submitted when the name field is empty.

2. The required Attribute

The required attribute makes a form field mandatory.

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

Example

3. Email Validation

Use type="email" when the user must enter an email address. Browsers provide built-in validation for this input type.

<input type="email"
       name="email"
       required>

Example

4. Number Validation

The number input type is useful when the user must enter a numeric value.

<input type="number"
       name="age"
       required>

5. min and max Attributes

The min and max attributes define the minimum and maximum allowed values for numeric inputs.

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

Example

6. minlength Attribute

The minlength attribute specifies the minimum number of characters allowed in a text input.

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

The user must provide at least five characters.

7. maxlength Attribute

The maxlength attribute specifies the maximum number of characters allowed.

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

The browser prevents the user from entering more than the specified number of characters for supported text controls.

8. pattern Attribute

The pattern attribute allows you to define a pattern that the entered value must match.

<input type="text"
       name="username"
       pattern="[A-Za-z]{5,}"
       required>

This example expects at least five alphabetic characters.

9. URL Validation

Use type="url" when the user should enter a URL.

<input type="url"
       name="website"
       required>

10. Date Validation

HTML date controls can be used when the user needs to select a date.

<input type="date"
       name="birthDate"
       required>

11. Password Validation

Password fields can use required, minlength, and other attributes.

<input type="password"
       name="password"
       minlength="8"
       required>

Example

12. Required Radio Buttons

Radio button groups can also use the required attribute so the user must choose an option.

<input type="radio"
       id="online"
       name="mode"
       value="online"
       required>
<label for="online">Online</label>

<input type="radio"
       id="offline"
       name="mode"
       value="offline">
<label for="offline">Offline</label>

13. Required Checkbox

A checkbox can be made mandatory using the required attribute.

<input type="checkbox"
       id="terms"
       name="terms"
       required>

<label for="terms">
    I agree to the terms and conditions
</label>

14. Validation with Select

A <select> element can be made mandatory using required.

<select name="course" required>

    <option value="">
        Select a course
    </option>

    <option value="dotnet">
        .NET
    </option>

    <option value="java">
        Java
    </option>

</select>

15. Complete Form Validation Example

<form>

    <label for="fullName">Full Name:</label>
    <input type="text"
           id="fullName"
           name="fullName"
           minlength="3"
           required>

    <br><br>

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

    <br><br>

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

    <br><br>

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

    <br><br>

    <input type="checkbox"
           id="terms"
           name="terms"
           required>

    <label for="terms">
        I agree to the terms
    </label>

    <br><br>

    <button type="submit">
        Register
    </button>

</form>

16. Browser Validation

Modern browsers provide built-in validation for many common HTML form controls. When a value does not satisfy a validation rule, the browser can prevent the form from being submitted.

<form>

    <input type="email"
           required>

    <button type="submit">
        Submit
    </button>

</form>

17. novalidate Attribute

The novalidate attribute disables the browser's built-in validation for a form.

<form novalidate>

    <input type="email"
           required>

    <button type="submit">
        Submit
    </button>

</form>

18. formnovalidate Attribute

The formnovalidate attribute can be used on a submit button to bypass browser validation for that particular submission.

<form>

    <input type="email"
           name="email"
           required>

    <button type="submit">
        Submit
    </button>

    <button type="submit"
            formnovalidate>
        Skip Validation
    </button>

</form>

19. Validation Attributes Overview

20. Client-Side vs Server-Side Validation

HTML validation happens in the browser and provides immediate feedback to users. Server-side validation happens on the server after the form is submitted.

21. Common Mistakes

Mistake 1: Forgetting required

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

Use required when the field must contain a value.

Mistake 2: Using the wrong input type

<input type="text" name="email">

For email input, prefer:

<input type="email" name="email">

Mistake 3: Invalid pattern

A poorly designed regular expression can reject valid values or accept values that should not be allowed.

22. Best Practices

• Use the correct HTML input type whenever possible.
• Use required only for fields that are genuinely mandatory.
• Use clear labels so users understand what information is expected.
• Use min, max, minlength, and maxlength where appropriate.
• Use pattern carefully for specific formats.
• Do not rely only on client-side validation for important application data.
• Provide useful error messages and clear instructions to users.

23. Practice Example

Create a registration form with the following validation rules:

• Full name is required and must contain at least 3 characters.
• Email is required and must use an email input.
• Age must be between 18 and 60.
• Password must contain at least 8 characters.
• Terms and conditions must be accepted.

<form>

    <label for="name">Full Name:</label>
    <input type="text"
           id="name"
           name="name"
           minlength="3"
           required>

    <br><br>

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

    <br><br>

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

    <br><br>

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

    <br><br>

    <input type="checkbox"
           id="terms"
           name="terms"
           required>

    <label for="terms">
        I agree to the Terms and Conditions
    </label>

    <br><br>

    <button type="submit">
        Register
    </button>

</form>