HTML5 form validation does not work on iPhone

Question

I have a form with validation of filling the fields HTML5 that does not work on iPhone, someone knows some option that works?

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

Answer 1

As per this link:

• http://caniuse.com/#feat=form-validation

In Safari and Chrome for iOS in versions 5.1, 6.1, 7.1, 8, 8.4 and 9 Form validation has partial support, refers to the lack of warning when the form with mandatory fields is tried to be presented, in other words, the form is not submitted random not valid, which is expected, but does not display the notifications.

So it’s a partial support.

Alternatively Voce can use jQuery mobile (obtained from this link http://www.gajotres.net/using-validation-plugin-with-jquery-mobile-1-4/), example:

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>

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

Note: jquerymobile does not work on Stacksnippet because of Sandbox