Jquery Validation : Submit button have to be clicked twice for form submission (fire fox)

Question

I am using jquery validation plugin for US ZIPCODE CHECK ,its working fine, but I have to push the submit button TWICE to get the form submitted,

Note : if I press enter that it submits the form properly, but it doesnt work with click event

I already have checked this stackoverflow answers but they didnt helped me out

Why do you have to submit twice before jQuery Validate submitHandler is triggered?

jquery validate need to click submit twice to submit form

jQuery using .on and .validate must submit form twice to validate

Below is my Javascript code

var ans;
$(document).ready(function(e)
        {
           jQuery.validator.addMethod("zipcode", function(e)
            {
               $.ajax(
                        {
                            url: "http://zip.elevenbasetwo.com",
                            cache: false,
                            async: false,
                            dataType: "json",
                            type: "GET",
                            data: "zip=" + $("#zip").val(),
                            success: function()
                            {
                                ans = true;
                            },
                            complete: function()
                            {
                                ans = true;
                            },
                            error: function()
                            {
                                ans = false;
                            }
                        }
                );
                return ans;
            });
            $("#register-form2").validate({
                debug: true,
                onkeyup: false,
                rules: {
                    zip: {
                        required: true,
                        zipcode: true,
                        minlength: 5
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    zip: {
                        required: "Please enter a USA zip code",
                        zipcode: "Please enter a valid USA zip code"
                    },
                    //  zip: "Please enter a valid USA zip code.",
                    email: "Please enter a valid email address."
                },
                submitHandler: function(form)
                {
                    alert('hi');
                    form.submit();
                }
            });
        });

Please mark that if I dont use ajax function in my custom method than it just works fine, but i am not able to solve it.

below is my HTML code

<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="wpcf7-form" id="register-form2" novalidate>
<input name="email" required id="email" type="text" placeholder="Email*">
<input type="text" name="zip" id="zip" required size="40" maxlength="15" placeholder="Zip code* (USA only)">
<input name="Form_submit" class="btn btn-primary wpcf7-form-control  wpcf7-submit" id="Submit" value="Sign-up" type="submit">
</form>

Looks like you're returning `ans` in your `zipcode` function before it's actually assigned. Move `return` statement inside callbacks. — Ilya Luzyanin, Aug 05 '14 at 08:49
@IlyaLuzyanin thanks for the reply.. i already tried putting `return values in ajax success and error callbacks`... but that doesnt return any value :( — Nishant Solanki, Aug 05 '14 at 08:51
Oops, nevermind, that was a stupid idea (it won't return nothing, I agree). Is ajax function fired both times? What are the values of `ans` each time? — Ilya Luzyanin, Aug 05 '14 at 08:55
yeah.. ajax is fired all the times, and returns perfect values, eg if `invalid zipcode than it return false, and for valid it returns true`.. — Nishant Solanki, Aug 05 '14 at 08:56
Maybe restructure this a little bit, like in this answer: http://stackoverflow.com/a/13203690/2571926? They're using `remote` instead of ajax requests. — Ilya Luzyanin, Aug 05 '14 at 09:08
@IlyaLuzyanin thanks. i already tried it.. it also doesnt let the form submit,, and remote call only works once, than i have to reload the page... — Nishant Solanki, Aug 05 '14 at 09:14
I just tried on fiddle its working fine? http://jsfiddle.net/9jr5D/ — zaw, Aug 05 '14 at 09:18
@zaw yeah i checked your fiddle.. but still the same problem.. on first click it doesnt submit the form... which browser you are using?? I am on firefox — Nishant Solanki, Aug 05 '14 at 09:20
@zaw yeah.. I checked on chrome. its working good on chrome.. but not in firefox... — Nishant Solanki, Aug 05 '14 at 09:23
http://jsfiddle.net/9jr5D/1/ updated and tested on firefox its working for me.. — zaw, Aug 05 '14 at 09:34
@zaw for me it doesnt works on the first click. I always have to click twice... — Nishant Solanki, Aug 05 '14 at 09:39

Jquery Validation : Submit button have to be clicked twice for form submission (fire fox)

0 Answers0