form - set required message html5

El elemento de formulario Html5 "requerido" en el iPad/iPhone no funciona

Question

Se supone que iPad safari es compatible con html5, pero parece que el elemento requerido no funciona. ¿Alguien sabe por qué, o tiene una solución decente que no requiere una tonelada de JavaScript?

Mi código

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

Answer 1

Aún no es compatible con iOS: cuándo puedo usar: requerido .

Answer 2

Esta es una solución de jQuery al problema, resalta los campos de entrada que también han fallado en un color de meñique.

$(''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 iOS 10.3, estos atributos son compatibles. También el tipo de correo electrónico requiere escribir el símbolo @ y así sucesivamente ...

Answer 4

Si ya está utilizando jQuery, Modernizr y yepnope, esta es una forma de resolverlo. Si no lo eres, esto agregará una gran cantidad de javascript adicional.

Mi solución

Answer 5

Supongo que puedes hacer algo antes de enviar una acción como esta

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

después de presionar el botón de submit , checkValid() se evoca antes de checkValid() . un valor de retorno de true continuará la acción de envío.

consulte esta publicación para obtener más información. :)