React.js and HTML5 email validation

Question

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?

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

Jake Wisse · Accepted Answer · 2016-08-17 17:56:52Z

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.

answered Aug 17, 2016 at 17:56

Jake Wisse

1851 silver badge5 bronze badges

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

Comments

Ben Smith · Accepted Answer · 2016-08-16 23:42:07Z

2

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.

answered Aug 16, 2016 at 23:42

Ben Smith

721 silver badge7 bronze badges

2 Comments

Stewie Griffin Over a year ago

you're right, it's not html5 validation (message looked like html5).. it's console warning coming from react. Adding noValidate didn't work

Guillermo Solana Over a year ago

In my case it worked, I used: <Form noValidate> .... </Form>

Collectives™ on Stack Overflow

React.js and HTML5 email validation

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related