HTML Tutorials
HTML Form Validation

HTML Form Validation

HTML form validation is essential for ensuring users enter the correct data before submitting a form. It improves user experience, reduces errors, and helps prevent security issues. In this blog post, we’ll explore how to validate required fields, email addresses, and numbers using HTML5.

1. Required Fields Validation

The required attribute ensures that a user does not leave an input field empty before submitting a form.

Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Submit</button>
</form>

Explanation:

  • The required attribute forces users to fill in the “Name” field before submitting the form.
  • If the user tries to submit without entering a name, the browser will show a validation message.

2. Email Validation

To ensure that users enter a properly formatted email address, we use the type="email" attribute.

Example:

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

Explanation:

  • The type="email" attribute checks if the input follows the standard email format (e.g., [email protected]).
  • The required attribute ensures the field is not left empty.
  • If an incorrect email format is entered, the browser will prompt an error message.

3. Number Validation

To accept only numerical values, we use the type="number" attribute.

Example:

<form>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>
    <button type="submit">Submit</button>
</form>

Explanation:

  • The type="number" attribute ensures only numbers are entered.
  • The min="18" and max="99" attributes set a valid range for age.
  • The required attribute ensures users don’t leave the field blank.
  • If the user enters a number outside the range, the browser will prevent submission and display a message.

Conclusion

Using built-in HTML validation makes form submission easier and improves data accuracy. However, HTML validation alone is not enough for security—always validate user inputs on the server side as well.

By implementing these simple HTML5 validation techniques, you can enhance your forms and provide a better experience for users.

Further Reading

HTML Form ElementsHTML Comments