Question

这是我的React Render Block。我在这里使用HTML5验证，使用必需的。这个东西应该可以正常工作。但它没有用。任何人都可以建议我如何使用HTML5验证与反应？

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

Answer 1

我也遇到了这个问题，为我修复的是添加<form>标记，并将处理程序从按钮输入移动到<form>＆＃39; {{1 }}：

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>或<button>，只要它具有<input>属性。

Answer 2

您需要将所有内容都包含在表单中，然后才能完成html5验证。

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

这样的事情应该有所帮助

Answer 3

呃，HTML5验证不起作用的原因是该代码无效HTML5。你有表单之外的表单元素，你正在编写内联JSX（不是有效的HTML），等等。

React是 javascript ，而不是HTML。即使您取消破解代码，HTML5验证器也不会在此运行。

如何在React中使用HTML5验证？

3 个答案: