1

Tenho um formulário com validação do preenchimento dos campos em HTML5 que não funciona no iPhone, alguém conhece alguma opção que funcione?

<form class="register-form" action="enviar_contato" method="post">
    <span>Nome*</span>
    <input type="text" name="nome" tabindex="1" pattern="^[a-zA-Zà-úÀ-Ú0-9 ]{3,}$"  placeholder="Por favor, digite seu nome" autofocus title="Esse campo deve conter apenas letras e no mínimo 3 caracteres!" required>
    <span>E-mail*</span>
    <input type="email" name="email" tabindex="2" placeholder="Por favor, digite seu endereço de e-mail" title="Esse campo deve conter um endereço de e-amail válido, ex. '[email protected]' !" required>
    <span>Assunto*</span>
    <input type="text" name="assunto" tabindex="3" pattern="^[a-zA-Zà-úÀ-Ú0-9 ]{5,}$"  placeholder="Por favor, digite o assunto" title="Esse campo deve conter apenas letras, números, e/ou separador, e no mínimo 5 caracteres!" required>
    <span>Mensagem*</span>
    <textarea cols="1" rows="1" name="mensagem" tabindex="4" pattern="[a-zA-Z0-9 ]{5,}" placeholder="Por favor, digite uma mensagem" title="Preencha utilizando letras ou números com no mínimo 5 caracteres!" required></textarea>
    <button name="submit" tabindex="5" type="submit">Enviar</button>
</form>

4
  • 1
    Safari? Qual é a versão do navegador? 31/08/2015 às 2:15
  • Qual a versão do iOS?
    – Syzoth
    31/08/2015 às 2:23
  • @guilherme iOS 8.4.1
    – Ricardo
    31/08/2015 às 3:38
  • @re22 não, Chrome
    – Ricardo
    31/08/2015 às 3:38

1 Resposta 1

1

Conforme este link:

No Safari e Chrome pra iOS nas versoes 5.1, 6.1, 7.1, 8, 8.4 e 9 o Form validation tem suporte parcial, refere-se à falta de aviso quando o formulário com campos obrigatórios é tentada a ser apresentado, em outras palavras, o formulario nao é submetido acaso nao valide, o que é o esperado, mas não exibe as notificacoes.

Portanto é um suporte parcial.

Como alternativa voce pode usar o jQuery mobile (obtido neste link http://www.gajotres.net/using-validation-plugin-with-jquery-mobile-1-4/), exemplo:

javascript:

$('#form1').validate({
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true
        }
    },
    messages: {
        fname: {
            required: "Please enter your first name."
        },
        lname: {
            required: "Please enter your last name."
        },
        lname: {
            required: "Please enter your email."
        }
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().prev());
    }
});

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet"/>

<div data-role="page" id="home" data-theme="b">
    <form id="form1">
        <div data-role="header">
            <h2>Get Update</h2>

        </div>
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label for="fname" data-theme="d">First Name:</label>
                <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name"/>
            </div>
            <div data-role="fieldcontainer">
                <label for="lname" data-theme="d">Last Name:</label>
                <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name"/>
            </div>
            <div data-role="fieldcontainer">
                <label for="email" data-theme="d">E-mail Address:</label>
                <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email"/>
            </div>             
        </div>
        <div data-role="footer" data-position="fixed">
                        <input type="button" data-icon="delete" value="Cancel" id="cancel"/>    
                        <input type="submit" data-icon="check" value="Submit" id="submit"/>
        </div>
    </form>                   
</div>
<div data-role="page" id="success" data-theme="b">
    <div data-role="header">
        <h2>Thank You !!!</h2>
    </div>
</div>

Exemplo: http://jsfiddle.net/Gajotres/RLJHK/

Nota: jquerymobile nao funciona no StackSnippet por causa do SandBox

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .