HTML5表单验证无法在bootstrap模式

时间:2017-10-30 18:08:45

标签: html5 twitter-bootstrap

我在bootstrap模式中使用下面的表单,但HTML5验证不起作用,并在控制台中抛出错误''无效的表单控件,名称='移动'是不可调焦的。'

<div id="registermodal1" class="modal register-modal" role="dialog">

<!-- Modal content-->
 <form role="form" class="reg_form">
<div class="modal-content">
  <div class="modal-header vostro-modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Register</h4>
  </div>
  <div class="modal-body">

  <div class="row">

      <div class="col-lg-4 col-md-4 col-sm-4 titleSideBar">
        <h5 style="color: #fff;">Create Cavein</h5>
<h5 style="color: #fff;">Account</h5>
<br><br><br><br>
<h5 style="color: #fff;">100% Genuine Owners, 0% Brokerage.</h5><br><br>
<img src="<?php  echo base_url('assets/images/house.png'); ?>">

      </div>
      <div class="col-lg-8 col-md-8 col-sm-8 mainContainer form">

          <div class="control-group">
                    <h6 style="font-size: 16px;color: #fff;padding-bottom: 5px;">Your contact number is necessary for us to verify your identity</h6>


                        输入您的手机号码。                              91

          </div>
          <br>


      </div>
    </div>


  </div>
  <div class="modal-footer">

    <button class="lof"><div class="loader"></div></button>
    <button type="submit" id="next_1" class="btn btn-next my-btn">Next</button>
  </div>

</div>
 </form>

2 个答案:

答案 0 :(得分:0)

在表单中添加novalidate属性会有所帮助:

<form name="myform" novalidate>

答案 1 :(得分:0)

在表单中,您可能隐藏了具有必需属性的输入。

<input type="hidden" required />

因此,form无法关注该元素,您必须从所有隐藏的输入中删除所需的内容。