web-dev-qa-db-fra.com

L'élément de formulaire Html5 "requis" sur iPad/iPhone ne fonctionne pas

le safari sur iPad est censé être conforme à la norme 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>
html5formsmobile-safarirequiredhtml-validation
19
SongBox

Ce n'est pas encore supporté par iOS: quand puis-je utiliser: required .

25
Ian Devlin

Ceci est une solution jQuery au problème, il met en évidence les champs de saisie qui ont également échoué dans une couleur rose.

$('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.
    }
});
16
Eliot

Depuis iOS 10.3, ces attributs sont pris en charge. De plus, le type de courrier électronique nécessite l'écriture du symbole @, etc.

2
Matouš Bečvář

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 le bouton submit, checkValid() est évoqué avant sa soumission. une valeur de retour de true continuera l'action de soumission.

reportez-vous à cet article pour plus d'explications. :)

1
AgnesCat

Si vous utilisez déjà jQuery, Modernizr et yepnope, c'est une façon de le gérer. Si vous ne l'êtes pas, cela ajoutera beaucoup de javascript.

Ma solution

1
Jbrown

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 en php avant votre formulaire.

0
C.Tom