Skip to content

Commit

Permalink
Add jsx-no-typeless-button rule
Browse files Browse the repository at this point in the history
  • Loading branch information
Hypnosphi committed Nov 9, 2017
1 parent f36b0fa commit 0e8530e
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 0 deletions.
25 changes: 25 additions & 0 deletions docs/rules/jsx-no-typeless-button.md
@@ -0,0 +1,25 @@
# Prevent usage of `button` elements without an explicit `type` attribute (react/jsx-no-typeless-button)

The default value of `type` attribute for `button` HTML element is `"submit"` which is often not the desired behavior and may lead to unexpected page reloads.
This rules enforces an explicit `type` attribute for all the `button` elements.

## Rule Details

The following patterns are considered errors:

```jsx
var Hello = <button>Hello</button>
```

The following patterns are **not** considered errors:

```jsx
var Hello = <span>Hello</span>
var Hello = <button type="button">Hello</button>
var Hello = <button type="submit">Hello</button>
var Hello = <button type="reset">Hello</button>
```

## When Not To Use It

If you use only `"submit"` buttons, you can disable this rule
1 change: 1 addition & 0 deletions index.js
Expand Up @@ -29,6 +29,7 @@ const allRules = {
'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
'jsx-no-typeless-button': require('./lib/rules/jsx-no-typeless-button'),
'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
'jsx-curly-brace-presence': require('./lib/rules/jsx-curly-brace-presence'),
'jsx-pascal-case': require('./lib/rules/jsx-pascal-case'),
Expand Down
41 changes: 41 additions & 0 deletions lib/rules/jsx-no-typeless-button.js
@@ -0,0 +1,41 @@
/**
* @fileoverview Forbid "button" element without an explicit "type" attribute
* @author Filipp Riabchun
*/
'use strict';

const hasProp = require('jsx-ast-utils/hasProp');

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

module.exports = {
meta: {
docs: {
description: 'Forbid "button" element without an explicit "type" attribute',
category: 'Possible Errors',
recommended: false
},
schema: []
},

create: function(context) {
return {
JSXElement: function(node) {
if (node.openingElement.name.name !== 'button') {
return;
}

if (hasProp(node.openingElement.attributes, 'type')) {
return;
}

context.report({
node: node,
message: 'Missing an explicit "type" attribute for button'
});
}
};
}
};
41 changes: 41 additions & 0 deletions tests/lib/rules/jsx-no-typeless-button.js
@@ -0,0 +1,41 @@
/**
* @fileoverview Forbid "button" element without an explicit "type" attribute
* @author Filipp Riabchun
*/
'use strict';

// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------

const rule = require('../../../lib/rules/jsx-no-typeless-button');
const RuleTester = require('eslint').RuleTester;

const parserOptions = {
ecmaVersion: 8,
sourceType: 'module',
ecmaFeatures: {
experimentalObjectRestSpread: true,
jsx: true
}
};

// ------------------------------------------------------------------------------
// Tests
// ------------------------------------------------------------------------------

const ruleTester = new RuleTester({parserOptions});
ruleTester.run('jsx-no-typeless-button', rule, {
valid: [
{code: '<span/>'},
{code: '<button type="button"/>'},
{code: '<button type="submit"/>'},
{code: '<button type="reset"/>'}
],
invalid: [{
code: '<button/>',
errors: [{
message: 'Missing an explicit "type" attribute for button'
}]
}]
});

0 comments on commit 0e8530e

Please sign in to comment.