ESLint Plugin for HTML5 Input Attributes To Help Mobile Users
Tags: html, webdev, showdev, productivity
Published: 2019-02-19 19:43:58

---
title: ESLint Plugin for HTML5 Input Attributes To Help Mobile Users
published: true
description: Static AST checker for HTML form rules on JSX elements for ESLint.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/e2flq0bp6mudwfc4hhhf.png
tags: html, webdev, showdev, productivity
series: html input attributes
---

Recently I wrote an article on dev.to called [3 HTML5 Input Attributes To Help Mobile Users](https://dev.to/deadlybyte/3-html5-input-attributes-to-help-mobile-users-1ofp) 😫📱. In that article I highlighted the **autocapitalize**, **autocorrect** and **spellcheck** attributes that can be disabled to help a mobile user when filling in a form.

This article looks at how these rules can be automated via linting. I've created  a ESLint plugin for React that will lint your code and warn you when these attributes should be applied. The rules look at your JSX and if it sees an input element with either type, name or id set to **"email"** then it will check these rules. Likewise, it'll also apply the rules when an input element has a name or id set to **"username"**.

* [eslint-plugin-jsx-form](https://www.npmjs.com/package/eslint-plugin-jsx-form) - The plugin can be viewed on NPM
* [Guide To Installing & Using Plugin - VSCode](#how-to-use)

#The Rules 📜
Here's the list of rules that are on the ESLint plugin.

* [email-disable-autocapitalize](#emaildisableautocapitalize)
* [email-disable-spellcheck](#emaildisablespellcheck)
* [username-disable-autocapitalize](#usernamedisableautocapitalize)
* [username-disable-autocorrect](#usernamedisableautocorrect)
* [username-disable-spellcheck](#usernamedisablespellcheck)

## email-disable-autocapitalize

Some browsers try to help the user by auto-capitalizing words, but this can be frustrating for users when filling in an email address on a form. Setting the **autocapitalize** attribute to `none` or `off` will disable this feature.

This rule aims to warn when the autocapitalize attribute is not set to none or off on an element that is used for collecting a user's email address.

### Incorrect Examples

```html
<input type="email" />
<input type="email" autocapitalize="on" />
<input name="email" />
<input id="email" />
```

### Correct Examples

```html
<input type="email" autocapitalize="none" />
<input type="email" autocapitalize="off" />
<input name="email" autocapitalize="off" />
<input id="email" autocapitalize="off" />
```

## email-disable-spellcheck

Some browsers try to help the user by spell checking words and marking those incorrectly spelt with an underline, but this can be frustrating for users when filling in an email address on a form. Setting the **spellcheck** attribute to `false` will disable this feature.

This rule aims to warn when the spellcheck attribute is not set to false on an element that is used for collecting a user's email address.

### Incorrect Examples

```html
<input type="email" />
<input type="email" spellcheck="true" />
<input name="email" />
<input id="email" />
```

### Correct Examples
```html
<input type="email" spellcheck="false" />
<input name="email" spellcheck="false" />
<input id="email" spellcheck="false" />
```

## username-disable-autocapitalize

Some browsers try to help the user by auto-capitalizing words, but this can be frustrating for users when filling in a username on a form. Setting the **autocapitalize** attribute to `none` or `off` will disable this feature.

This rule aims to warn when the autocapitalize attribute is not set to none or off on an element that is used for collecting a username.

### Incorrect Examples

```html
<input name="username" />
<input name="username" autocapitalize="on" />
<input id="username" />
<input id="username" autocapitalize="on" />
```

### Correct Examples

```html
<input name="username" autocapitalize="off" />
<input name="username" autocapitialize="none" />
<input id="username" autocapitalize="off" />
<input id="username" autocapitalize="none" />
```

## username-disable-autocorrect

iOS will try to help the user and auto correct words that it thinks are mistakes, but this can be frustrating for users when filling in a username on a form. Setting the **autocorrect** attribute to `off` will disable this feature.

This rule aims to warn when the autocorrect attribute is not set to off on an element that is used for collecting a username.

### Incorrect Examples

```html
<input name="username" />
<input name="username" autocorrect="on" />
<input id="username" />
<input id="username" autocorrect="on" />
```

### Correct Examples

```html
<input name="username" autocorrect="off" />
<input id="username" autocorrect="off" />
```

## username-disable-spellcheck

Some browsers try to help the user by spell checking words and marking those incorrectly spelt with an underline, but this can be frustrating for users when filling in a username on a form. Setting the **spellcheck** attribute to `false` will disable this feature.

This rule aims to warn when the spellcheck attribute is not set to false on an element that is used for collecting a username.

### Incorrect Examples

```html
<input name="username" />
<input name="username" spellcheck="true" />
<input id="username" />
<input id="username" spellcheck="true" />
```

### Correct Examples

```html
<input name="username" spellcheck="false" />
<input id="username" spellcheck="false" />
```

# How To Use 🛠️

Below is a guide on how to use the plugin on an existing React project that already has ESLint enabled.

## Install ESLint Plugin

```bash
npm install eslint-plugin-jsx-form --save-dev
```

Or 
```bash
yarn add eslint-plugin-jsx-form -D
```

## Add Plugin To Config
Edit your ESLint config, usually `.eslintrc` file and add the following:

```json
{
    ...
    "plugins": [..., "jsx-form"],
    "rules": {
        ...,
        "jsx-form/email-disable-autocapitalize": 2,
        "jsx-form/email-disable-spellcheck": 2,
        "jsx-form/username-disable-autocapitalize": 2,
        "jsx-form/username-disable-autocorrect": 2,
        "jsx-form/username-disable-spellcheck": 2
    }
}
```

Or instead of individually configuring the rules a recommended configuration is also available to use this add the following:

```json
{
    ...
    "extends": [..., "plugin:jsx-form/recommended"],
    "plugins": [..., "jsx-form"],
}
```

**Note:** ... refers to existing content within the config file.

## In Action 🎬
Below is a screenshot of the plugin in action on VS Code. As you can see when you hover over the red squiggly line the warning is displayed. In this case, 'Set "autocapitalize" attribute to "none" or "off" for email'.

![ESLint Plugin jsx-form In Action on VS Code](https://thepracticaldev.s3.amazonaws.com/i/kgjpm4vje6wr81409gpw.png)

These violations can also be viewed in the Problems window on VS Code.

![ESLint Plugin jsx-form Problems Window View](https://thepracticaldev.s3.amazonaws.com/i/wtopvzcpyyz94prtoh2j.png)