DEV Community

Cover image for ESLint Plugin for HTML5 Input Attributes To Help Mobile Users
Carl Saunders
Carl Saunders

Posted on • Updated on

ESLint Plugin for HTML5 Input Attributes To Help Mobile Users

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

The Rules ๐Ÿ“œ

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

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" />
Enter fullscreen mode Exit fullscreen mode

Correct Examples

<input type="email" autocapitalize="none" />
<input type="email" autocapitalize="off" />
<input name="email" autocapitalize="off" />
<input id="email" autocapitalize="off" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Correct Examples

<input type="email" spellcheck="false" />
<input name="email" spellcheck="false" />
<input id="email" spellcheck="false" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Correct Examples

<input name="username" autocapitalize="off" />
<input name="username" autocapitialize="none" />
<input id="username" autocapitalize="off" />
<input id="username" autocapitalize="none" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Correct Examples

<input name="username" autocorrect="off" />
<input id="username" autocorrect="off" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Correct Examples

<input name="username" spellcheck="false" />
<input id="username" spellcheck="false" />
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or

yarn add eslint-plugin-jsx-form -D
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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"],
}
Enter fullscreen mode Exit fullscreen mode

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

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

ESLint Plugin jsx-form Problems Window View

Top comments (0)