Bootstrap 3：“必需”表单在移动设备中不起作用

Question

我正在制作一个我用引导程序设计的表单，并连接到谷歌文档做一些小技巧。 当我在浏览器和开发者工具模拟器中测试它时，表单效果很好。如果我留下一个空白区域，一个小弹出提示我在继续之前填充该空间，它不会将信息发布到电子表格中，也不会前进到问候页面（预期行为）。

但是，当我在 iPhone 和其他移动设备上进行测试时，它不起作用。我可以留下空白，它只是简单地忽略“必需”条件，然后将我带到问候页面。

如您所见，这是一个问题。我希望表单的行为与浏览器上的行为相同。有什么想法吗？

<!-- Form -->
<div class="col-lg-6 form-container" style="margin-top: 20px; margin-left:-20px">
<script type="text/javascript">var submitted=false;</script>
    <iframe name="hidden_iframe" id="hidden_iframe"
    style="display:none;" onload="if(submitted)
    {window.location='thank-you.html';}"></iframe>
    <form class="form-horizontal" action="https://docs.google.com/a/xxxxxxxx.com/forms/d/1psz4JlSVCmr99r7Qdg0LsV0WJjwzm1aSZBECmWpFX-w/formResponse" method="post"
    target="hidden_iframe" onsubmit="submitted=true;">
<fieldset>

<!-- Form Name -->
<h3 class="centered"><span class="glyphicon glyphicon-ok"></span> Get Your API Key Today</h3>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Full Name">Full Name*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.492241038" value="" class="form-control input-md required" id="entry_492241038" dir="auto" aria-label="1  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Company">Company*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.22144039" value="" class="form-control input-md required" id="entry_22144039" dir="auto" aria-label="2  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Company Email">Company Email*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.1882859742" value="" class="form-control input-md required" id="entry_1882859742" dir="auto" aria-label="3  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Phone Number">Phone Number*</label>  
  <div class="col-md-4">
  <input type="text" name="entry.1063706991" value="" class="form-control input-md required" id="entry_1063706991" dir="auto" aria-label="4  " aria-required="true" required="" title="">

  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="How will you use the API?">How will you use the API?*</label>
  <div class="col-md-4">                     
  <textarea name="entry.1508475478" rows="3" cols="0" class="form-control input-md required" id="entry_1508475478" dir="auto" aria-label="5  " aria-required="true" required=""></textarea>
  </div>

</fieldset>
<div class="submit-button centered">
    <!-- <input type="submit" name="submit" value="Submit" id="ss-submit"> -->
    <button href="thank-you.html" class="btn btn-info btn-lg btTxt submit" id="ss-submit" name="submit" type="submit" value="Submit"> Get Started Now </button>
</div>
</form>

</div>

Answer 1

所需的属性没有完全发挥作用，您可能需要使用 polyfill。如果您使用 webshim，您可以使用以下几行代码：

<script src="js/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>

<script>

  //request the features you need:
  webshims.polyfill('forms');

</script>

这是一个包含即时验证的引导示例：

http://jsfiddle.net/trixta/T29Kx/light/

Answer 2

您需要将表单排成一行。看起来您正在尝试将列嵌套到？再看一遍网格文档：

http://getbootstrap.com/css/#grid