I have an email input in my react ponent:

                <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?

I have an email input in my react ponent:

                <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?

• javascript
• html
• validation
• reactjs

Share Improve this question Follow asked Aug 16, 2016 at 22:52 Stewie GriffinStewie Griffin 9,3472222 gold badges7272 silver badges9898 bronze badges 1

• 1 On a sidenote, doing React forms bees much easier with this lib: github./prometheusresearch/react-forms – Ashish Chaudhary Commented Aug 17, 2016 at 0:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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 ing up to soon. There are several libraries out there that will do that for you.