Tips For Validating HTML Form Inputs

Form Validation is something we all have to do on daily basis on the frontend because we want to improve user experience.

I will explain some simple ways to validate data using html.

INPUT ATTRIBUTES

HTML provides some attributes that can aid in validating data. Let's take a look at a few of them.

1. Pattern: This specifies a regular expression that the value of an input should be validated against when a form is submitted. This can be used with a number of input types including text, date, tel, email, password, etc.

2. Title: This is not used in validating data but to provide more information on what format the data should be provided.

3. Required: This ensures that an input field is not empty when a form is submitted.

4. Minlength: This simply sets the minimum length of a data that is provided in an input field. See an example below.

  <input type="text" minlength="4" required>

These attributes can be combined with a number of input types to ensure the right data is provided.

INPUT TYPES

Using the right input type can help validate against incorrect data type. Below are input types you may need for validating your form.

1. Email: Using email input type for collecting a users email will validate the data to ensure it is in the right format when the form is submitted.

2. Password: This doesn't only validate the password field but it also masks the characters that are typed in. The strength of the password can be specified by passing a regex to the pattern attribute of the input field.

  <input type="password" pattern="(?=.*[a-z]).{6}" title="Must be 6 characters or more and 
contain at least 1 lower case letter">

Above is a simple example of a password input field being validated against a regex provided in the pattern attribute. The title attribute carries the text to be displayed when the provided password fails the regex validation.

3. Tel: This basically defines a field for entering a telephone number. It is mainly used for optimising the keyboard on mobile devices. Combining this with the pattern attribute can help validate the data in the tel input field. Take a look at the example below

  <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Phone Number format is +99(99)9999-9999">

4. Number: This defines an input field that accepts only numerical values. It allows for restrictions to be set on what range of numbers are accepted.

  <input type="number" min="2" max="8">

The above example shows a number input field that only accepts numbers between 2 and 8.

Below is a snippet of some of the things mentioned above being put into good use.

  <form id="form" autocomplete>
    <input type="text" minlength="4" required>
    <input type="email" required>
    <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" 
     title="Phone Number format is +99(99)9999-9999" required>
    <input type="password" pattern="(?=.*[a-z]).{6}" 
     title="Must be 6 characters or more and 
     contain at least 1 lower case letter" required>
  </form>

P.S : Data Validation has to be done on the server-side where a user has no access to, this ensures that the user does not tamper with the data or type of data being worked with on the server. Also In a situation where you want to do some client side testing, you can add a novalidate attribute to your <form> element.

HTML has become more powerful in recent years, and it is interesting the things that can be done with it. I will be writing about it a lot. If you liked this, then please ❤️ and follow me here and on Twitter.