0

I am having a problem trying to get my HTML form to work on iOS devices. The "required" attribute put under the input element works fine on any desktop web browser, but not on the mobile iOS Safari. The problem is, I can hit "submit" on my form the mobile device, and it "submits" even without any content.

Help in this area would be much appreciated.

Following is the HTML form code in it's entirety (without the CSS.) The full thing can be viewed at 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>
Deduplicator
  • 44,692
  • 7
  • 66
  • 118
bvanderwerf
  • 1
  • 1
  • 3
  • Welcome to the world of cross-browser compatibility. The only reliable way to do what you want is to implement a check in Javascript before submitting the form. You can use a product like Modernizr to check whether your browser supports certain features and use the Javascript code only if it is required. In any case your server should be validating too, since nothing coming from a browser is trustworthy. FWIW you only need to include the `required` keyword. Using `required="true"` or similar is unnecessary, and _might_ cause compatibility issues. –  Jan 10 '14 at 00:17
  • For iOS you will have to do a validation with Javascript. Call a function on submit where you check the value of each input and only if the inputs are `!= ''` (or a lenght you defined) direct to the link in `action`. – zk_mars Jan 10 '14 at 00:25
  • Ok, I have changed the values of 'required="true"' to simply 'required'. I still have the same problem with the mobile device submitting the form without requiring the other inputs. I am not at all familiar with JavaScript and would have no clue of what the proper syntax would be. Could anyone perhaps post that here? Thanks! – bvanderwerf Jan 10 '14 at 17:04
  • Could @FlyingLemon shed some light on this or possibly post the JavaScript that would complete this function? – bvanderwerf Jan 10 '14 at 17:26

1 Answers1

0

Unfortunately the required HTML5 Attribute is not supported yet by iOS.

See this question here: Required attribute HTML5

Community
  • 1
  • 1
War Gravy
  • 1,543
  • 3
  • 20
  • 32