Reactjs default Form validation with event.preventDefault()

Question

I do not want to submit form clicking on submit. So i am using :

onSubmit (e) {
    e.preventDefault();
    console.log(this.state);
  }

<form className="loginform">
              <h1 className="logo"><img src={images.Logo} /></h1>
              <input
                className="login"
                placeholder="Username"
                type="text"
                required="true"
                onBlur={(e) => { this.userName(e); }}
              />
              <input className="login" placeholder="Password" type="password" required="true" />
              <input
                className="submit"
                onClick={(e) => { this.onSubmit(e); }}
                type="submit"
                value="Submit"
              />
            </form>

Doing so form validation is not working. I want to use default form validation with preventDefault.

Did you try using your method as a onSubmit property on your form instead? — Axnyff
– Axnyff, Commented Apr 21, 2018 at 9:58

dfsq · Accepted Answer · 2018-04-21 09:59:14Z

5

You should use onsubmit form event:

<form className="loginform" onSubmit={this.onSubmit.bind(this)}>
  <h1 className="logo"><img src={images.Logo} /></h1>
  <input
    className="login"
    placeholder="Username"
    type="text"
    required="true"
    onBlur={(e) => { this.userName(e); }}
  />
  <input className="login" placeholder="Password" type="password" required="true" />
  <input
    className="submit"
    type="submit"
    value="Submit"
  />
</form>

In general you should avoid handling form submission via button onclick events, additional benefit of onsubmit is that it will also be fired on ENTER key submission.

answered Apr 21, 2018 at 9:59

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactjs default Form validation with event.preventDefault()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related