Menu
I am developing an app on phonegap (v 5.1.1) and using phonegap app for testing locally on android. I have created a form in html and for validation purpose I've used required property. In browser (firefox, chrome) it is working fine as it should be, while on mobile it does not validate anything. and submits. Why is this happening ? Does html5 required supported on android.
<form id="LoginForm" action="">
<input type="email" name="email" id="inputEmail3" placeholder="Email" required>
<input type="password" name="pwd" id="inputPassword3" placeholder="Password" required>
<button type="submit">Sign in</button>
</form>Thanks.
702
To ignore HTML validation, you can remove the attribute on button click using JavaScript. Uer removeAttribute() to remove an attribute from each of the matched elements.
The Form Tag has “novalidate” Attribute This is the first and the most common reason that causes the issue. HTML5 required attribute validation doesn't work if the form has the novalidate attribute in its markup. With the presence of the attribute, the tag looks like <form action="#" novalidate> .
on('click', function(event) { var isvalidate = $("#formID")[0]. checkValidity(); if (isvalidate) { event. preventDefault(); // HERE YOU CAN PUT YOUR AJAX CALL } }); }); Code described above will allow You to use basic HTML5 validation (with type and pattern matching) WITHOUT submitting form.
Form validation can happen on the client side and the server side. Client side validation occurs using HTML5 attributes and client side JavaScript.
You're running Android 4.2.2 and "required" / form validation isn't properly supported there until newer versions of Android. caniuse.com has a good matrix of support here.
To cover all Android versions, you can use "required" but don't rely on it and also defensively code for missing values in your JavaScript when the user submits the form.
111
An interesting situation for iOS: now it is supported in Safari Mobile and when used with "Add to Home Screen" feature, however, once the app is built using Cordova, validation is just ignored.
Tested for required attribute, same device, almost the same navigator.userAgent:
Browser navigator.userAgent:
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C107 Safari/604.1
Cordova app navigator.userAgent:
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C107
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
