O elemento de formulário HTML5 “obrigatório” no iPad/iPhone não funciona

Question

Supõe-se que o safari do iPad seja compatível com HTML5, mas parece que o elemento necessário não funciona.Alguém sabe por que ou tem uma solução alternativa decente que não exija muito JavaScript?

Meu código

<input type=email class=input placeholder="Email" name="email" required>

Answer 1

Ainda não é compatível com iOS: quando posso usar:obrigatório.

Answer 2

Esta é uma solução jQuery para o problema, ela destaca os campos de entrada que falharam também na cor rosa.

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

Answer 3

Desde o iOS 10.3, esses atributos são suportados.Além disso, o tipo de e-mail exige a escrita do símbolo @ e assim por diante...

Answer 4

Se você já usa jQuery, Modernizr e sim, esta é uma maneira de lidar com isso.Caso contrário, isso adicionará muito javascript extra.

Minha solução

Answer 5

Eu acho que você pode fazer algo antes da ação de envio como esta

<form name="myForm" action="valid.html" onsubmit="checkValid()" method="post">
  ... ...
</form>

depois de pressionar submit botão, checkValid() é evocado antes de realmente se submeter.um valor de retorno de truecontinuará a ação de envio.

referir-se esta postagem para mais explicações. :)

Answer 6

Se você usa PHP, você pode adicionar uma validação como esta

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
     }
   }

Você então adiciona esta função no php antes do seu formulário.