Recently I wrote an article on dev.to called 3 HTML5 Input Attributes To Help Mobile Users 😫📱. 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 - The plugin can be viewed on NPM
• Guide To Installing & Using Plugin - VSCode

The Rules 📜

Here's the list of rules that are on the ESLint plugin.

• email-disable-autocapitalize
• email-disable-spellcheck
• username-disable-autocapitalize
• username-disable-autocorrect
• username-disable-spellcheck

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

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

Correct Examples

<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

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

Correct Examples

<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

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

Correct Examples

<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

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

Correct Examples

<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

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

Correct Examples

<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

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

Or

yarn add eslint-plugin-jsx-form -D

Add Plugin To Config

Edit your ESLint config, usually .eslintrc file and add the following:

{
    ...
    "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:

{
    ...
    "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'.

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