<input required>属性在iOS设备上不起作用

Question

我在尝试让 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="[,,&quot;1157424860243765947&quot;]
">
          <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>

Answer 1

不幸的是，iOS 尚不支持所需的 HTML5 属性。

在这里查看这个问题：必需的属性 HTML5