HTML5 form validation does not work on iPhone

Navigation
1

I have a form with validation of filling in HTML5 fields that does not work on iPhone, does anyone know of any options that work? 

<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>
    
asked by anonymous 31.08.2015 / 04:01

1 answer

1

According to this link:

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 required fields is tempted to be displayed, in other words, the form is not submitted, it does not validate, which is expected but does not display the notifications.

So it's a partial support.

Alternatively you can use jQuery mobile (obtained at this link link ), 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><scriptsrc="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: link

  

Note: jquerymobile does not work on StackSnippet because of SandBox

    
31.08.2015 / 05:59
How to calculate and show the duration time of a video Wordpress custom search plugin