11

I have a component with a form:

< form action="javascript:void(0)" onSubmit={this.join}>

Eslint is complaining:

error Script URL is a form of eval no-script-url

Note: I am also using "eslint-plugin-react"

How can I relax this rule or what would be an alternative to the javascript void function?

4 Answers4

11

I was having just this problem and then saw this pattern in the official Redux docs and it made a lot of sense to me:

<a
  href=""
  onClick={e => {
    e.preventDefault()
    onClick()
  }}
>
  {children}
</a>

Source

That's what I'll be doing from now on.

tplants
  • 187
  • 1
  • 7
  • 1
  • Blank href gives warning : The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md – Ritesh Sep 26 '22 at 06:25
7

I disabled it:

"no-script-url": 0
  • 1
    hi can you please share configuration, where did you put this line. I have tried in .eslintrc and also in eslintrc.json not working. thanks – Saqy G Aug 09 '19 at 10:39
3

Actually it is wrong to disabled it, because javascript: is like eval for browser, and eval is evil as people know.

Alternatively, you don't need to put action prop. preventDefault in your join method instead. For example;

function join(e){
  e.preventDefault();
  //...
}
1

e.preventDefault() change with javascript:void(0)

<form action={
    e => {
        e.preventDefault()
    }
} onSubmit={this.join}>
 //...   
</form>

Or add rule in package.json file

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
       //...
      "no-script-url": "off",
       //...
    }
  },
GMKHussain
  • 3,342
  • 1
  • 21
  • 19