HTML Form is submitted without to be populated on iOS devices

Question

I have simple html form on my site:

    <form action="mailer.php" method="post">

    <fieldset>
    <div class="column-50">
      <div>

        <label for="name">Name <span>*</span></label>
        <input type="text" id="name" name="name" required>
        <span class="mf-error-message">Error! </span>    

       </div>


       <div>

        <label for="email">Email <span>*</span></label>
        <input type="text" id="email" name="email" required>
        <span class="mf-error-message">Error! </span>    

       </div>
          .... // some more fields
       <input type="submit" id="submit" name="submit" value="Enter your Information">
    </form>

The problem is that on iOS devices ( phone, tablet .. ) form it can be submitted without user to populate required fields.

Why is that? Is there a way to fix it on client side?

it's just a snipped of the form the button is there. Do you want me to add it to the question? — S.I., Aug 29 '16 at 13:54
Button is added. Whole form works perfectly. Just on iOS devices user can submit empty form even there is `required` tag on the fields — S.I., Aug 29 '16 at 13:55
In that case check out this question http://stackoverflow.com/questions/10664356/html5-form-element-required-on-ipad-doesnt-work — Daniel, Aug 29 '16 at 13:59
Check this @Garg: Hack for mobile safari http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari — pedrouan, Aug 29 '16 at 14:12
Ok, thank's. Didn't knew that this issue is in apple since ... so much years :) — S.I., Aug 29 '16 at 14:18

score 0 · Accepted Answer · answered Aug 30 '16 at 05:56

This should work. But it will be for all not only for iOS

<form action="mailer.php" method="post" id="myForm">

Then this

var form = document.getElementById('myForm'); 
     form.noValidate = true;
     form.addEventListener('submit', function(event) {  
        if (!event.target.checkValidity()) {
             event.preventDefault();  
             alert('Error! You must fill all required fields.');             
    }
}, false);

HTML Form is submitted without to be populated on iOS devices

1 Answers1