eslint / eslint-plugin-react: <form action=“Javascript:void(0)” > - no-script-url error

11
votes

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?

3
javascriptreactjseslint
You can always disable a rule on a line also using // eslint-disable-line no-script-url – Gyandeep

3 Answers

10
votes

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.

6
votes

I disabled it:

"no-script-url": 0
2
votes

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();
  //...
}