L'élément de formulaire HTML5 « obligatoire » sur iPad/iPhone ne fonctionne pas
-
11-12-2019 - |
Question
Safari sur iPad est censé être conforme à HTML5, mais il semble que l'élément requis ne fonctionne pas.Quelqu'un sait pourquoi, ou a une solution de contournement décente qui ne nécessite pas une tonne de JavaScript ?
Mon code
<input type=email class=input placeholder="Email" name="email" required>
La solution
Ce n'est pas encore pris en charge dans iOS: Quand puis-je utiliser: Obligatoire .
Autres conseils
Il s'agit d'une solution de jQuery à la question, il met en évidence les champs de saisie qui ont également échoué dans une couleur pinky.
$('form').submit(function(){
var required = $('[required="true"]'); // change to [required] if not using true option as part of the attribute as it is not really needed.
var error = false;
for(var i = 0; i <= (required.length - 1);i++)
{
if(required[i].value == '') // tests that each required value does not equal blank, you could put in more stringent checks here if you wish.
{
required[i].style.backgroundColor = 'rgb(255,155,155)';
error = true; // if any inputs fail validation then the error variable will be set to true;
}
}
if(error) // if error is true;
{
return false; // stop the form from being submitted.
}
});
Depuis iOS 10.3, ces attributs sont pris en charge.Le type de messagerie peut également écrire le symbole @ et ainsi de suite ...
Si vous utilisez déjà JQuery, Modernizr et Yepnope, c'est une façon de traiter avec elle.Si vous n'êtes pas alors alors cela ajoutera beaucoup de JavaScript supplémentaire.
Je suppose que vous pouvez faire quelque chose avant l'action de soumission comme celle-ci
<form name="myForm" action="valid.html" onsubmit="checkValid()" method="post">
... ...
</form>
après avoir appuyé sur submit
bouton, checkValid()
est évoqué avant de se soumettre réellement.une valeur de retour de true
poursuivra l'action de soumission.
faire référence à ce post pour plus d'explications. :)
Si vous utilisez PHP, vous pouvez ajouter une validation comme celle-ci
function validation(){
if(isset($_POST['submit'])){
$email = $_POST['email'];
if(empty($email)){
echo $error = "Your email cannot be empty";
} else {
return true; //or do something next here
}
}
Vous ajoutez ensuite cette fonction dans PHP avant votre formulaire.