Garg Garg - 3 months ago 9
HTML Question

HTML Form is submitted without to be populated on iOS devices

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?

Answer

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);