17

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 HTML5 validation with react? 

            <div >
                <div className="modal-dialog">
              <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

                        <div class="col-sm-10">

                            <input type="email" className="form-control" name="email" required
                                   placeholder="Enter a valid email address" id='email' ref="email"/>


                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

                        <div class="col-sm-10">
                            <input type="password" className="form-control" id='password' ref="password" required
                                   placeholder="Password must be 10 character long"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" input type="submit" className="btn btn-success"
                                    onClick={this.saveNewUser}>Register
                            </button>
                        </div>
                    </div>


                    <div>

                    </div>

                </div>
            </div>
Improve this question
2
  • Did you try going through this? christianalfoni.github.io/javascript/2014/10/22/… Commented Aug 31, 2015 at 12:31
  • Using Backbone for model, not flux. that is why, did not go through this. Commented Aug 31, 2015 at 16:44

3 Answers 3

Reset to default
22

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.

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

Comments

0

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

Improve this answer

2 Comments

Using Bootstrap class="form-group" for form rendering, not plain html form actually. May be that is why validation is not working.
enclosing in form tag doesn't help unfortunately
-4

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.

Improve this answer

3 Comments

it's a complete instruction set on what to fix, and someone else repeating what i said is upvoted
I think this question was talking about input validation rather than semantic W3C validation (see stackoverflow.com/questions/36650295/… for that).
it's been quite heavily changed in the three years since this was written

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.