CODEWITHSUNDEEP
javascripthtmlvalidationreactjs
Stewie Griffin
Stewie Griffin

Reputation: 9317

React.js and HTML5 email validation

I have an email input in my react component: 

                <input
                  type="email"
                  autoComplete="email"
                  placeholder="Email"
                  required
                  value={this.state.formData.email}
                  onChange={this.handleFieldChange('email')}
                />

which throws me a warning in the console:

 The specified value "myemail" is not a valid email address.

with each keystroke till the input is a valid email. I believe this is default HTML5 email validation message and since I change its' state with each keystroke, react rerenders it and HTML5 re-validates it. Changing the type to "text" fixes it, but I would love to keep it as "email". What would be a proper way to handle this in react in order to avoid those html5 warnings?

Upvotes: 4

Views: 3264

Answers (2)

Jake Wisse
Jake Wisse

Reputation: 185

For a controlled input, ultimately React has to call Element.prototype.setAttribute(), and at least in Chrome 52 (I've yet to test with other browsers) this results in a warning being logged to the console. This warning does not show up with uncontrolled inputs, or with a non-React, vanilla HTML5 form.

Check out DOMPropertyOperations.setValueForProperty() in the React source, specifically line 162 (in v15.3.0) for <input>s.

Upvotes: 4

Ben Smith
Ben Smith

Reputation: 72

Are your input tags in a <form>? Add the novalidate attribute the form element to disable HTML5 validation. Are you sure it is HTML5 validation ? I don't recall HTML5 validation putting errors in the console.

Sounds like you really want to denounce the users input to prevent the error message coming up to soon. There are several libraries out there that will do that for you.

Upvotes: 2

Related Questions