How to validate form input element in react?

Question

I am using required attribute of html5 that make sure the field is not empty. I have a submit button and the validation is triggered after this button is pressed. I just want to keep this validation and not submit the form.

render() {
  <form role="form">
    <input type="number" value={this.state.value} required/>
    <button type="submit" onClick={this.onFinish.bind(this)}>Submit</button>
  </form>
}

onFinish(event) {
    // event.target.checkValidity(); // something like this?
    event.preventDefault();
  }

When I use event.preventDefault() the form is not submitted but the validations are also not run. How can I do this? I do not want to write a custom validation for things like required, as they are already available and I want to use the existing one.

b0nbon · Accepted Answer · 2020-01-01 05:01:40Z

7

Sorry, I'm late to the party. You can use e.target.checkValidity() which checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element and then returns false. use along with on submit. Here is how I did it:

handleSubmit(e){
  e.preventDefault();
  if(e.target.checkValidity()){ // use can also use e.target.reportValidity
   // submitForm
 }
}
render(){
 return(
  <form onSubmit={e => this.handleSubmit(e)}>
    <input type="number" value={this.state.value} required/>
    <button type="submit">Submit</button
  </form>
 )
}

just added onSubmit to the form and passed the event.

edited Jan 1, 2020 at 5:01

answered Jan 1, 2020 at 4:44

b0nbon

1162 silver badges9 bronze badges

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

Comments

Stefan Schiessl · Accepted Answer · 2018-01-30 08:16:58Z

3

I ran into the same problem, but I need the onClick handle because I have several submit buttons.

I wanted to differentiate both buttons and still use the built-in form validation for required fields.

This was working for me:

render() {
  <form role="form" ref="submitForm">
    <input type="number" value={this.state.value} required/>
    <button type="submit"
            onClick={this._onFinishOne.bind(this)}>
      Submit One
    </button>
    <button type="submit"
            onClick={this._onFinishTwo.bind(this)}>
      Submit Two
    </button>
  </form>
}

_onFinishOne(event) {
    if (this.refs.submitForm.reportValidity()) {
      event.preventDefault();
      // do something here
    }
}

_onFinishTwo(event) {
    if (this.refs.submitForm.reportValidity()) {
      event.preventDefault();
      // do something here
    }
}

answered Jan 30, 2018 at 8:16

Stefan Schiessl

312 bronze badges

1 Comment

Santhosh Over a year ago

I was looking for this

sachin kumar · Accepted Answer · 2016-10-20 17:10:47Z

0

If you don't want to submit form on click of button, why won't you remove type="submit" from button and use type="button" instead?

Seems you are calling you validation actions on submit of form which is causing this issue. Can you please paste your rest of code here or on fiddler for better input?

Regards, sachin

answered Oct 20, 2016 at 17:10

sachin kumar

1691 gold badge1 silver badge10 bronze badges

1 Comment

sachin kumar Over a year ago

@AnkitSinghaniya Can you please share your validation binding code. Are you triggering your validation binding on Submit?

aks · Accepted Answer · 2016-10-20 17:41:39Z

0

Via trial and error, I've found a solution that seems to work fine. If you know a better or different way please let me know. This is what I did:

render() {
  <form role="form" onSubmit={this.onFinish.bind(this)>
    <input type="number" value={this.state.value} required/>
    <button type="submit">Submit</button>
  </form>
}

onFinish(event) {
    // All Validations triggered and this function is only called
    // when everything is valid, so I do my custom post here.
  }

Just moved the method form onClick of submit button to onSubmit of form.

answered Oct 20, 2016 at 17:41

aks

9,63112 gold badges54 silver badges81 bronze badges

Comments

abhirathore2006 · Accepted Answer · 2016-10-20 17:46:25Z

0

There are various ways in which you can validate the form, i use semantic ui framework, so i prefer its inbuilt validation and for special cases, i validate the data in submit function handler,

so its just a matter of choice, how you prefer to validate. Also i don't use normal form submission so all form in my case are ajax forms and data submission is handled by Actions

answered Oct 20, 2016 at 17:46

abhirathore2006

3,8551 gold badge28 silver badges29 bronze badges

2 Comments

aks Over a year ago

I checked out semantic ui framework, it looks great, but I am using a custom theme thus I will have to use these validations I guess.

abhirathore2006 Over a year ago

You can include other validation framework too, there is no restrictions what library you include

Collectives™ on Stack Overflow

How to validate form input element in react?

5 Answers 5

Comments

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related