Stewie Griffin Stewie Griffin - 3 months ago 111
Javascript Question

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?

Answer

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.