Form Validation

Introduction to Form Validation

Form validation is a crucial part of any web application. It ensures that the data sent by a user to a server is correct and secure. It validates user input against certain rules and standards. HTML offers built-in form validation features which we are going to explore in this tutorial.

What is Form Validation?

In simple terms, form validation is the process of checking if the information provided by the user is correct. For example, if a form requires an email address, form validation will check that the user has provided a value in a correct email format, like [email protected].

HTML5 introduced several form validation techniques which we will be covering in this tutorial. These techniques require no JavaScript, making them easy to implement for beginners.

The required Attribute

The required attribute is a boolean attribute that, when present, specifies that an input field must be filled out before the user can submit the form.

Here is an example:

<form action="">
  Username: <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

In this example, the form cannot be submitted until the "username" field is filled out.

Input Restrictions

HTML allows us to restrict the user input in more ways than just making it required. Here are some other input restrictions:

1. min and max attributes: These attributes specify the minimum and maximum values for an input field. They are perfect for numeric input types.

   <form action="">
     Enter a number between 1 and 5: <input type="number" name="quantity" min="1" max="5">
     <input type="submit">
   </form>

2. maxlength attribute: This attribute specifies the maximum number of characters allowed in an input field.

   <form action="">
     Enter a username (max 12 characters): <input type="text" name="username" maxlength="12">
     <input type="submit">
   </form>

3. pattern attribute: This attribute specifies a regular expression against which the input field's value is checked. When the value of the input field matches the pattern, the form can be submitted.

   <form action="">
     Enter a username (only lowercase letters): <input type="text" name="username" pattern="[a-z]*">
     <input type="submit">
   </form>

Validation Feedback

HTML5 also provides validation feedback which can be styled with CSS to provide a more user-friendly experience. When an input field is invalid, it gets a :invalid pseudo-class. For example, you can use CSS to change the border color of the input field to red when it's invalid.

<style>
input:invalid {
  border: 2px solid red;
}
</style>

<form action="">
  Username: <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

Conclusion

Form validation is an essential part of building web forms. It helps to ensure the accuracy and security of the user data. HTML5 makes it easy to add form validation with no JavaScript required. You can use the required attribute to make a field mandatory, or use other attributes like min, max, maxlength, and pattern to set rules for the input.