Bootstrap 3: Form "required" not working in mobile devices - html

Question

I'm working on a form I styled with bootstrap and connected to google docs doing a little hack.
The form works great when I test it in the browser and the developer tools emulators. If I leave a blank space, a small pop tells me to fill that space before continuing and it doesn't post the information into the spreadsheet nor advancing to the greeting page (expected behavior).
However when I test this in my iPhone and other mobile devices it doesn't work. I can leave blank spaces and it just simply ignores the "required" condition and it takes me to the greeting pages.
As you can see that's a problem. I want the form to behave as it behaves on the browser. Any ideas?
<!-- 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

The required Attribute is not fully working, you might want to use a polyfill. In case you use webshim, you get it to work with the following lines:
<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>
Here is an example with bootstrap including instant validation:
http://jsfiddle.net/trixta/T29Kx/light/

Answer 2

You need to wrap your forms in a row. It also looks like you are trying to nest your columns to? Go over the grid docs one more time:
http://getbootstrap.com/css/#grid