Form Validation - Safari - .validate()

Question

I am trying to write a mobile version of a website because I don't know how to write an app yet. Things were going great, until I tried my forms out on Safari with blank values.

Apparently Safari doesn't even recognize "required" flags and you have to jump through all these hoops to get it to work. Well my feet keep catching on the hoops.

I'm assuming I have to use jquery and .validate() somehow. However for the life of me I can't figure it out.

My form is simple: (I'm pasting the whole section of the form code just in case its something outside of the form that is making this not work:

$output .= '<div class="hidden_div" id="mobile_zip">';
$output .= '<center>
        <form id="shop_mobile" method="post" action="choose_location.php">
        <input placeholder="Delivery Zipcode" name="po_zip" type="text" required />
        <input type="hidden" name="ismobile" value="yes" />
        <br />
        <input type="submit" value="Start Order" />
        </form>
        </center>';
$output .= '</div>';

On Chrome Mobile, IE regular, Firefox.. I haven't tested every browser yet but on every browser I have tested the above code works great. You cant click Submit without filling in a zipcode. However, Safari fails and since most users have iPhone's that is a huge problem with my "mobile" website. My biggest problem, and likely mis-understanding, is when I put this code into my .js file, it stops working all together (the same way as if I was missing a ; or ) or whatever)

$("#shop_mobile").validate({rules:{"po_zip":{required: true}}, messages:{"po_zip":{required: "Please enter your name"}}});

My .js works when that code is commented out, 100% fails when its in there. So that leads me to believe 1 of 2 things: 1) I don't understand how to use that code, despite multiple sites I've looked at their code and that's how its used or 2) I can't figure out a syntax error (has happened before hehe)

So my first question is, am I using the .validate right, and will it help me with my problem with Safari not recognizing HTML5 "required" attribute. And my 2nd question assuming the first question is not my solution is, HOW IN THE WORLD do people make their forms not allow blanks on mobile safari! Now I know i'm not Paypal (heh) but when I hit submit on their site on mobile safari it doesn't let me go through! eBay, same thing. so obviously there is a way around this.

I also tried another solution, which had something to do with making all forms "novalidate" then checking them somehow and otherwise failing, but THAT broke "datepicker" which I also need.

I really hope the solution has something to do with .validate() and i'm just using it wrong, based on what I've read, that seems the likely option but i just spent 3 hours researching and nothing I did would stop safari from posting blank input fields through my forms.

I have a much larger form with more fields that I need to validate also in mobile but if I cant even get a single field form to not let me go past, without breaking my datepicker, no point in even looking at the bigger form!

Maybe i'm just in the dark, but I really can't believe safari just straight ignores HTML5 attributes. I think i'm still in shock. Even the desktop version fails. UNREAL. always thought IE would be my struggle to make things work.

EDIT: This is the other code I tried, it works to stop blank form submission, but it breaks the jquery "datepicker" (the calendar never pops up)

var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
    if (!event.target.checkValidity()) {
        event.preventDefault(); // dismiss the default functionality
        alert('Please, fill the form'); // error message
    }
}, false);

I got that from here:

Required Attribute Not work in Safari Browser

score 0 · Answer 1 · answered Jan 08 '15 at 06:59

I couldn't get any "tricks" to work like .validate or .h5validate. I just don't seem to get how to use those.

What I did get to work though was this:

    $("#shop_mobile").on("submit", function(e) {
    alert("Inside");
    zipinput = $("#po_zip").val();
    alert(zipinput);
    if (zipinput.match(/(^\d{5}$)/)) {
        document.getElementById("po_zip").className = document.getElementById   ("po_zip").className.replace( /(?:^|\s)ErrorRedBorder(?!\S)/g , '' )
        alert("MATCHED!");

    } else {
        document.getElementById("po_zip").className = "ErrorRedBorder";
        alert("NO MATCH!");
    }
    e.preventDefault();
});

Not as simple as it should be, but it works and honestly, its probably a better solution anyway as javascript works on all platforms where as browser tricks like "required" do not. I just need to do a lot of javascripting to get all my forms taken care of properly :)

score 0 · Answer 2 · answered Jun 09 '15 at 19:27

I wrote this jQuery script that works thanks to some help from your code. "e.preventDefault()"

You can try this script. What is nice is it uses the patterns you define in your inputs.

$('input[name="submit"]').click(function(e) {
$(':input').each(function(input) {
    if($(this).attr('required')) {
        var required = $(this);
        if(required.attr('pattern')) {
            required.css('background-color','inherit');
            var patt =  new RegExp(required.attr('pattern'),"i");
            if( !patt.test( required.val() ) ) {
                required.css('background-color','#f2dede');
                e.preventDefault();
                window.scroll(0,144);
            }
        }
        else {
            if(required.val() == '' || required.val() == null) {
                required.css('background-color','#f2dede');
                e.preventDefault();
                window.scroll(0,144);
            }
        }
    }
});});

Form Validation - Safari - .validate()

2 Answers2