我在尝试让我的HTML表单在iOS设备上运行时遇到问题。输入元素下的“required”属性在任何桌面Web浏览器上都能正常工作,但在移动iOS Safari上却无法正常工作。问题是,我可以在我的表单上点击“提交”移动设备,即使没有任何内容,它也“提交”。
非常感谢这方面的帮助。
以下是完整的HTML表单代码(没有CSS。)可以在http://www.calvarybaptistelkhart.org/test/contact/contact.html查看完整的内容
<form action="GOOGLE-SPREADSHEET-RESPONSE" method="post" target="hidden_iframe" onsubmit="submitted=true;">
<h1>Contact Form</h1>
<hr>
<ol style="padding-left: 5px">
<div class="name-email">
<div class="name">
<div dir="ltr" class="">
<div class="">
<label aria-hidden="true" class="" for="entry_516852872">
<div class="">Full Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="astricks">*</span></div>
<div class="" dir="ltr"></div>
</label>
<input required type="text" name="entry.516852872" value="" class="" id="entry_516852872" dir="auto" aria-label="Full Name " aria-required="true" title="Please enter your full name">
<div class=""></div>
</div>
</div>
</div>
<br>
<div class="email">
<div dir="ltr" class="">
<div class="">
<label aria-hidden="true" class="" for="entry_1989288897">
<div class="">Email Address
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="astricks">*</span></div>
<div class="" dir="ltr"></div>
</label>
<input required type="email" name="entry.1989288897" value="" class="" id="entry_1989288897" dir="auto" aria-label="Email Address Please enter a valid email address" aria-required="true" title="Please enter a valid email address">
</div>
</div>
</div>
</div>
<br>
<div class="subject">
<div dir="ltr" class="">
<div class="">
<label aria-hidden="true" class="" for="entry_686432534">
<div class="subject">
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="astricks"><p></p></></span></div>
<div class="" dir="ltr"></div>
</label>
<ul class="" role="radiogroup" aria-label="Subject ">
<li class="">
<label><span class="qField">
<input required type="radio" name="entry.1726780033" value="Question" id="group_1726780033_1" role="radio" class="" aria-label="Question">
</span> <span class="subjectQuestion">Question</span> </label>
</li>
<li class="">
<label><span class="cField">
<input required type="radio" name="entry.1726780033" value="Comment" id="group_1726780033_2" role="radio" class="" aria-label="Comment">
</span> <span class="subjectComment">Comment</span> </label>
</li>
<li class="">
<label><span class="bField">
<input required type="radio" name="entry.1726780033" value="Bug Report" id="group_1726780033_3" role="radio" class="" aria-label="Bug report">
</span> <span class="subjectBug">Bug report</span> </label>
</li>
</ul>
</div>
</div>
</div>
<br>
<br>
<div class="message">
<div dir="ltr" class="">
<div class="">
<label aria-hidden="true" class="" for="entry_943921138">
<div class="">Your Message:
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="astricks">*</span></div>
<div class="" dir="ltr"></div>
</label>
<textarea required name="entry.943921138" rows="8" cols="0" class="" id="entry_943921138" dir="auto" aria-label="Your Message: " aria-required="true"></textarea>
<div class=""></div>
</div>
</div>
</div>
<input type="hidden" name="draftResponse" value="[,,"1157424860243765947"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fbzx" value="1157424860243765947">
<div class="submit">
<table id="navigation-table">
<tbody>
<tr>
<td class="" id="navigation-buttons" dir="ltr"><input type="submit" name="submit" value="Submit" id="ss-submit"></td>
</tr>
</tbody>
</table>
</div>
</ol>
</form>