loading...
Cover image for ESLint Plugin for HTML5 Input Attributes To Help Mobile Users

ESLint Plugin for HTML5 Input Attributes To Help Mobile Users

deadlybyte profile image Carl Saunders Updated on ・4 min read

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

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

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

Posted on by:

deadlybyte profile

Carl Saunders

@deadlybyte

I'm a full stack software developer specialising in React. With 20+ years’ experience, I'm passionate about following best practices and standards.

Discussion

markdown guide