How can I use HTML5 Validation with React?

Question

This is my React Render Block. I am using HTML5 Validation here, using required. This things supposed to work fine. But it is not working. can anyone suggest me how to use

Answer 1

Er, the reason HTML5 validation isn't working is that that code is not valid HTML5. You have form elements outside of forms, you're writing inline JSX (which is not valid HTML), et cetera.

React is javascript, not HTML. An HTML5 validator is not going to run on this even after you un-break the code.

Answer 2

you need to probably enclose everything in a form, only then the html5 validations are done.

<form>
<input type="email" className="form-control" name="email" required placeholder="Enter a valid email address" id='email' ref="email"/>
<input type="submit" className="btn btn-success" onClick={this.saveNewUser} />
</form>

Something like this should help

Answer 3

I ran into this issue as well, and what fixed it for me was adding the <form> tags, and moving the handler from the button input to the <form>'s onSubmit:

<form onSubmit={this.saveNewUser}>
  <input type="email" className="form-control" name="email" required placeholder="Enter a valid email address" id='email' ref="email" />
  <button type="submit" className="btn btn-success" />
</form>

It looks like the submit button can be a <button> or <input> as long as it has a type="submit" attribute.