Tips For Validating HTML Form Inputs
Tags: html, frontend, css
Published: 2019-08-14 13:57:45

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.

```html
  <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.

```html
  <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

```html
  <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.

```html
  <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.

```html
  <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](https://twitter.com/nedyudombat).