jQuery Validation Not Working on Iphone

Question

I have linked a form from campaign monitor to a mobile site and I am using jQuery validate for validation. All works well on desktop browsers but when I check on my Iphone the validations does not work.

I am not the experience using JQuery so any help would be much appreciated.

Thank you in advance!

Live Demo http://files.perfectday.gb.com/internal/stackoverflow/mobile-form/get-your-coupon.php

My validation JQuery and form are as follows.

    <script type="text/javascript">
    $.validator.methods.equal = function(value, element, param) {
        return value == param;
    };
    $(document).ready(function(){
    $("#subForm").validate({
            rules: {
                math: {
                    equal: <?php echo $randomNumTotal; ?>   
                }
            },
            messages: {
                math: "Try again!!"
            }
        });
    });
    </script>


<!-- Form -->
    <form action="http://perfectday.createsend.com/t/j/s/nyuyh/" method="post" id="subForm">

        <div class="name">
            <label for="name">Name:<span>*</span></label><br>
            <input type="text" name="cm-name" id="name" size="25" class="required text-input" />
        </div>
        <div class="nyuyh-nyuyh">
            <label for="nyuyh-nyuyh">Email Address:<span>*</span></label><br>
            <input type="text" name="cm-nyuyh-nyuyh" id="nyuyh-nyuyh" size="25" class="required email text-input"/>
        </div>
        <div class="address1">
            <label for="Address 1">Address 1:<span>*</span></label><br>
            <input type="text" name="cm-f-juar" id="Address1" size="25" class="required text-input" />
        </div>
        <div class="address2">
             <label for="Address 2">Address 2:<span>*</span></label><br>
            <input type="text" name="cm-f-juaj" id="Address2" size="25" class="text-input required" />
        </div>
        <div class="city">
            <label for="City">City/town:<span>*</span></label><br>
            <input type="text" name="cm-f-juat" id="City" size="25"class="required text-input" />
        </div>
        <div class="postal">
            <label for="postal">Post code:<span>*</span></label><br>
            <input type="text" name="cm-f-juai" id="postal" size="25"class="required text-input" />
        </div>
        <div class="captcha">
            Enter the correct result<span>*</span><br>
            <input type="text" name="captchaImage" id="sum"  value="<?php echo $randomNum ?> + <?php echo $randomNum2 ?>" disabled="disabled" />
            <input type="text" name="math" id="math" maxlength="6" />
        </div>
    <input value="submit information" class="submit" type="image" src="images/trans.png" class="get-your-coupon-submit" alt="Submit" >
    <br>
    </form>

When you say "validation does not work" what do you mean? I tried this both with my iPhone and a simulator, and submitting the form does not cause any javascript errors. There's also a "try again" text next to the math problem. It's generally good to turn on the Safari's debug console on iPhone. It can be found in Settings -> Safari -> Advanced -> Debug console. — Oiva Eskola
– Oiva Eskola, Commented Feb 23, 2012 at 19:05
By validation I meant the functionality that does not allow the from to submit until correct info is entered. The issue lied with jquery-1.7.1 not working. Not entirely sure why. JQuery v1.3.2 seems to work for me now. — perfectday
– perfectday, Commented Feb 27, 2012 at 9:57

Missing Chromosome · Accepted Answer · 2012-03-27 15:31:03Z

3

I had the same issue on the iPhone with jQuery version 1.6.1+ and Validations plugin version 1.9

The workaround was to configure the plugin to not validate on form submit:

$("form").validate({
   onsubmit: false
});

Validate the form and submit programmatically:

if( $("form").valid() ){
  // post validation code

  form.submit()
}

answered Mar 27, 2012 at 15:31

Missing Chromosome

463 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PolGraphic Over a year ago

Where do you place that "submit programmatically" fragment? I am asking, because you don't have access to "form" variable anywhere (just in submitHandler: function(form) ). And if I try to do it as "$('form').submit()" there is an recurrence problem.

Ian Clark · Accepted Answer · 2015-04-02 10:13:34Z

2

(3 year later update): I've also found issues with with iPhones and jQuery.validate. Although the validation was applying, the first field was not scrolling into view. To get around this, I just updated my .invalidHandler() method to include:

$("foo").validate({
  invalidHandler: function(e, validator) {
    if(window.navigator.userAgent.match(/iphone/i)) {
      window.setTimeout(function() {
        $("html,body").animate({
          scrollTop: $(validator.errorList[0].element).offset().top
        });
      }, 0);
    }
  }
});

answered Apr 2, 2015 at 10:13

Ian Clark

9,3874 gold badges36 silver badges49 bronze badges

1 Comment

Chirag thaker Over a year ago

I have similar issue of Jquery in mask method. jQuery('#zip').mask('00-000'); is my code to mask input text. this thing works on android but in ios after adding ' - ' string gets reversed. if i want to enter 00-123, in ios it get written as 00-321 can you help me on this minor problem.

Collectives™ on Stack Overflow

jQuery Validation Not Working on Iphone

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related