remote validation prevents submit #58

Closed
ghost opened this Issue Mar 18, 2011 · 21 comments

Comments

Projects
None yet

ghost commented Mar 18, 2011

When I enter something valid in a remote validation field, then immediately click on the submit button without hitting tab, the form does not submit. I have to click submit again!

This happens in Firefox 3.0 and 3.6 and in Chrome but not in IE 8.

I think there is some sort of race condition involving validator.pendingRequest but I'm not sure.

To recreate, try this contact form:
http://www.simplyvoting.com/website.php?mode=contact
Enter x as subject and as message
Then enter a valid email (remotely validated).
Click submit.
Nothing happens, click submit again!

@wallenium

This comment has been minimized.

Show comment Hide comment
@wallenium

wallenium May 6, 2011

same for me. its an urgent one... should be fixed soon!

same for me. its an urgent one... should be fixed soon!

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Jul 22, 2011

Yes, I might be losing potential customers that think my contact form is broken. This bug is still present in version 1.8.1

ghost commented Jul 22, 2011

Yes, I might be losing potential customers that think my contact form is broken. This bug is still present in version 1.8.1

@jzaefferer

This comment has been minimized.

Show comment Hide comment
@jzaefferer

jzaefferer Sep 11, 2011

Collaborator

I can reproduce on the provided page, but that doesn't really work as a testcase. Need something simpler. @hdragomir could you take a shot?

Collaborator

jzaefferer commented Sep 11, 2011

I can reproduce on the provided page, but that doesn't really work as a testcase. Need something simpler. @hdragomir could you take a shot?

@hdragomir

This comment has been minimized.

Show comment Hide comment
@hdragomir

hdragomir Sep 12, 2011

Contributor

I'll get on this asap.

Contributor

hdragomir commented Sep 12, 2011

I'll get on this asap.

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Sep 12, 2011

Here is a stripped down testcase...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.microsoft.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#subject').focus();
            $('#contact_form').validate({
                messages: {
                    subject: "Enter a subject"
                },
                rules: {
                    email: {
                        required: true,
                        email: true,
                        remote: "eg.php?validate=email"
                    }
                }
            });
        );
        </script>
        <form method="post" id="contact_form" action="eg.php?mode=contact">
            <fieldset>
                <legend>contact</legend>
                <div class="indicates-required">* indicates required</div>
                <div>
                    <label for="subject">message subject <span class="required">*</span></label>
                    <input type="text" name="subject" id="subject" class="required" />
                </div>
                <div>
                    <label for="email">your email <span class="required">*</span></label>
                    <input type="text" id="email" name="email" />
                </div>
            </fieldset>
            <div>
                <input type="submit" name="submit" value="Send" />
            </div>
        </form>
    </body>
</html>

eg.php:

    $return = 'bad email';
    if ($_GET['validate'] == 'email' && !empty($_REQUEST['email'])) {
        $return = true;
    }
    echo json_encode($return);
    exit();

ghost commented Sep 12, 2011

Here is a stripped down testcase...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.microsoft.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#subject').focus();
            $('#contact_form').validate({
                messages: {
                    subject: "Enter a subject"
                },
                rules: {
                    email: {
                        required: true,
                        email: true,
                        remote: "eg.php?validate=email"
                    }
                }
            });
        );
        </script>
        <form method="post" id="contact_form" action="eg.php?mode=contact">
            <fieldset>
                <legend>contact</legend>
                <div class="indicates-required">* indicates required</div>
                <div>
                    <label for="subject">message subject <span class="required">*</span></label>
                    <input type="text" name="subject" id="subject" class="required" />
                </div>
                <div>
                    <label for="email">your email <span class="required">*</span></label>
                    <input type="text" id="email" name="email" />
                </div>
            </fieldset>
            <div>
                <input type="submit" name="submit" value="Send" />
            </div>
        </form>
    </body>
</html>

eg.php:

    $return = 'bad email';
    if ($_GET['validate'] == 'email' && !empty($_REQUEST['email'])) {
        $return = true;
    }
    echo json_encode($return);
    exit();
@hdragomir

This comment has been minimized.

Show comment Hide comment
@hdragomir

hdragomir Sep 12, 2011

Contributor

I get the issue when I load jquery.validate.js off the CDN, but if I load the version that is in master from my localhost the issue goes away.

Going deeper.

edit I cannot reproduce the bug any longer. I have tried with the github version of 1.8.1, with the version from the CDN and the same file from the CDN served from localhost.

What I have noticed, though is: when I type in an email that is not in my browser's autocomplete, I do not have the issue described above. When I start entering an email that is in my autocomplete list, the first click actually just dismisses the autocomplete box. I think this is the actual issue.

Contributor

hdragomir commented Sep 12, 2011

I get the issue when I load jquery.validate.js off the CDN, but if I load the version that is in master from my localhost the issue goes away.

Going deeper.

edit I cannot reproduce the bug any longer. I have tried with the github version of 1.8.1, with the version from the CDN and the same file from the CDN served from localhost.

What I have noticed, though is: when I type in an email that is not in my browser's autocomplete, I do not have the issue described above. When I start entering an email that is in my autocomplete list, the first click actually just dismisses the autocomplete box. I think this is the actual issue.

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Sep 12, 2011

Still happens for me, even why I type an email that I never typed before. Strange, eh?

ghost commented Sep 12, 2011

Still happens for me, even why I type an email that I never typed before. Strange, eh?

@hdragomir

This comment has been minimized.

Show comment Hide comment
@hdragomir

hdragomir Sep 12, 2011

Contributor

Will have another go.

Contributor

hdragomir commented Sep 12, 2011

Will have another go.

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Oct 25, 2011

Still an issue in 1.9.0.

I can confirm that the problem goes away as you add such alert statements. I tried tracing it and I think that even when the problem reproduces, the function handle() is still called and returns true. Does that mean the submit event handler got lost somehow? Or maybe I'm just lost!

On 25/10/2011 6:08 AM, alex wrote:

Face same issue in 1.7. Really hard to reproduce this. Problem focused in this code:
79. if ( validator.pendingRequest ) {
80. validator.formSubmitted = true;
81. return false;
82. }
if you place on 78 line simple alert(validator.pendingRequest); it won't reproduce anymore. Also if you use firebug with breakpoint on 79 line it won't reproduce too, but if breakpoint will be only at 80 you can catch it sometimes. It's all depends on how quick server respond. I've got a lot remote validators, may be problem in them.
My validation config:

var myForm = $('form:first');
myForm.validate({
onkeyup: false,
errorClass: 'iFieldInputError',
validClass: 'iFieldInputRight',
onsubmit: true,
success: function(label)
{
$('[name="' + label.attr('for') + '"]').qtip('destroy');
},
errorPlacement: function(error, element)
{
if ($(error).text())
$(element).filter(':not(.iFieldInputRight)').qtip({
overwrite: true,
content: error,
position: { my: 'left center', at: 'right center' },
show: {
event: false,
ready: true
},
hide: false,
style: {
widget: false,
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded iTooltipError',
tip: true
}
});
} ...
});

ghost commented Oct 25, 2011

Still an issue in 1.9.0.

I can confirm that the problem goes away as you add such alert statements. I tried tracing it and I think that even when the problem reproduces, the function handle() is still called and returns true. Does that mean the submit event handler got lost somehow? Or maybe I'm just lost!

On 25/10/2011 6:08 AM, alex wrote:

Face same issue in 1.7. Really hard to reproduce this. Problem focused in this code:
79. if ( validator.pendingRequest ) {
80. validator.formSubmitted = true;
81. return false;
82. }
if you place on 78 line simple alert(validator.pendingRequest); it won't reproduce anymore. Also if you use firebug with breakpoint on 79 line it won't reproduce too, but if breakpoint will be only at 80 you can catch it sometimes. It's all depends on how quick server respond. I've got a lot remote validators, may be problem in them.
My validation config:

var myForm = $('form:first');
myForm.validate({
onkeyup: false,
errorClass: 'iFieldInputError',
validClass: 'iFieldInputRight',
onsubmit: true,
success: function(label)
{
$('[name="' + label.attr('for') + '"]').qtip('destroy');
},
errorPlacement: function(error, element)
{
if ($(error).text())
$(element).filter(':not(.iFieldInputRight)').qtip({
overwrite: true,
content: error,
position: { my: 'left center', at: 'right center' },
show: {
event: false,
ready: true
},
hide: false,
style: {
widget: false,
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded iTooltipError',
tip: true
}
});
} ...
});

@vogdb

This comment has been minimized.

Show comment Hide comment
@vogdb

vogdb Oct 25, 2011

I think that problem in remote validator and my hands. I've override it for my purpose and i think there is problem in calling startRequest() and stopRequest() correctly. As for now i've reduced number of remote validators to min and no problem. Actually you can just use option "submitHandler". It's better than mess of alerts. In this method just make delay for 1 second and all will be ok. Actually i didn't catch this issue before because i had submitHandler.

vogdb commented Oct 25, 2011

I think that problem in remote validator and my hands. I've override it for my purpose and i think there is problem in calling startRequest() and stopRequest() correctly. As for now i've reduced number of remote validators to min and no problem. Actually you can just use option "submitHandler". It's better than mess of alerts. In this method just make delay for 1 second and all will be ok. Actually i didn't catch this issue before because i had submitHandler.

@mlynch

This comment has been minimized.

Show comment Hide comment
@mlynch

mlynch Apr 23, 2012

Contributor

Is this still an issue with the code in master?

Contributor

mlynch commented Apr 23, 2012

Is this still an issue with the code in master?

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Apr 23, 2012

I downloaded the master jquery.validate.js, installed on my website, and it is still an issue :-(

ghost commented Apr 23, 2012

I downloaded the master jquery.validate.js, installed on my website, and it is still an issue :-(

@mlynch

This comment has been minimized.

Show comment Hide comment
@mlynch

mlynch May 5, 2012

Contributor

@black001 I'm not able to reproduce it. It's a runtime error that seems to cause the double click requirement (check the console when it happens). Can you give me a version of your form that fails, and make sure you are including the non-minified version of jquery.validate.js so I can debug it? Thanks.

Contributor

mlynch commented May 5, 2012

@black001 I'm not able to reproduce it. It's a runtime error that seems to cause the double click requirement (check the console when it happens). Can you give me a version of your form that fails, and make sure you are including the non-minified version of jquery.validate.js so I can debug it? Thanks.

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 10, 2012

I figured out what's going on. Thanks to Firebug I was able to finally get an error message:

"elem[type] is not a function" for non-minified jquery
"e[h] is not a function" for minified jquery

The problem is a combination of remote validation with a submit button with name="submit". I think it is the same bug as here: http://network.convergenceservices.in/forum/48-jquery/1465-solved-elemtype-is-not-a-function-when-using-jquery-validation-and-tokens.html

Why does the submit button's name cause a problem? See these quotes:

"Also, the .trigger("submit") method doesn't work if the name attribute of the input[type="submit"] element is set to the value "submit". Since .submit() called with no arguments is a shortcut for .trigger('submit'), then anytime you call JQuery's .submit() method on an element, you would want to make sure and assign the input's name attribut something other than "submit"."
-- http://stackoverflow.com/questions/6406473/how-do-i-submit-a-form-after-jquery-ajax-validation

"The first thing to notice is that you´ve named your submit button "submit". This corresponds with form.submit and making you unable to submit the form."
-- http://stackoverflow.com/questions/9570592/how-to-put-a-callback-in-the-submit-event-listener-of-a-form-to-wait-for-users

There is an ugly workaround that I found here: http://network.convergenceservices.in/forum/48-jquery/1465-solved-elemtype-is-not-a-function-when-using-jquery-validation-and-tokens.html

My solution is to name the submit button name="submit_button" instead. Since jquery-validation will not post submit button values with the form if the name isn't submit, I also added a hidden element like this:

$('#contact_form').append(
    $('<input/>', {
        type: 'hidden',
        name: 'submit_button',
        value: 'Send'
    })
);

Thanks for looking into this!

ghost commented May 10, 2012

I figured out what's going on. Thanks to Firebug I was able to finally get an error message:

"elem[type] is not a function" for non-minified jquery
"e[h] is not a function" for minified jquery

The problem is a combination of remote validation with a submit button with name="submit". I think it is the same bug as here: http://network.convergenceservices.in/forum/48-jquery/1465-solved-elemtype-is-not-a-function-when-using-jquery-validation-and-tokens.html

Why does the submit button's name cause a problem? See these quotes:

"Also, the .trigger("submit") method doesn't work if the name attribute of the input[type="submit"] element is set to the value "submit". Since .submit() called with no arguments is a shortcut for .trigger('submit'), then anytime you call JQuery's .submit() method on an element, you would want to make sure and assign the input's name attribut something other than "submit"."
-- http://stackoverflow.com/questions/6406473/how-do-i-submit-a-form-after-jquery-ajax-validation

"The first thing to notice is that you´ve named your submit button "submit". This corresponds with form.submit and making you unable to submit the form."
-- http://stackoverflow.com/questions/9570592/how-to-put-a-callback-in-the-submit-event-listener-of-a-form-to-wait-for-users

There is an ugly workaround that I found here: http://network.convergenceservices.in/forum/48-jquery/1465-solved-elemtype-is-not-a-function-when-using-jquery-validation-and-tokens.html

My solution is to name the submit button name="submit_button" instead. Since jquery-validation will not post submit button values with the form if the name isn't submit, I also added a hidden element like this:

$('#contact_form').append(
    $('<input/>', {
        type: 'hidden',
        name: 'submit_button',
        value: 'Send'
    })
);

Thanks for looking into this!

@jzaefferer jzaefferer closed this May 16, 2012

@brutuscat

This comment has been minimized.

Show comment Hide comment
@brutuscat

brutuscat Jul 17, 2013

Why is this closed?

Why is this closed?

@Carlitta87

This comment has been minimized.

Show comment Hide comment
@Carlitta87

Carlitta87 Dec 16, 2013

This should not be closed...

This should not be closed...

@jzaefferer

This comment has been minimized.

Show comment Hide comment
@jzaefferer

jzaefferer Jan 15, 2014

Collaborator

If you have a similar issue, please create a new ticket along with a reduced test case, via jsfiddle or jsbin.

Collaborator

jzaefferer commented Jan 15, 2014

If you have a similar issue, please create a new ticket along with a reduced test case, via jsfiddle or jsbin.

@weeckie

This comment has been minimized.

Show comment Hide comment
@weeckie

weeckie Aug 18, 2014

@black001 , The submit button for my form neither name or value as "submit", but for me also, the form is not working after adding remote function, its validating all the form including ajax but not reaching the submit handler in the validation function.

weeckie commented Aug 18, 2014

@black001 , The submit button for my form neither name or value as "submit", but for me also, the form is not working after adding remote function, its validating all the form including ajax but not reaching the submit handler in the validation function.

@Rathilesh

This comment has been minimized.

Show comment Hide comment
@Rathilesh

Rathilesh Sep 19, 2016

below code fixed my issue
remote: { url: "http:url.com", type: "post", data: { USER_ID: userid }, async: false, // set async = false }

Rathilesh commented Sep 19, 2016

below code fixed my issue
remote: { url: "http:url.com", type: "post", data: { USER_ID: userid }, async: false, // set async = false }

@ssantamariaparra

This comment has been minimized.

Show comment Hide comment
@ssantamariaparra

ssantamariaparra May 18, 2017

Great, the 'async: false' setting solved the problem

Great, the 'async: false' setting solved the problem

@Rani-Kheir

This comment has been minimized.

Show comment Hide comment
@Rani-Kheir

Rani-Kheir May 31, 2017

My issue had a different solution, the remote address was returning { "valid" = "something-else-other-than-true-or-false" } and that lead to weird behavior.

The field was green (that gave it the impression that it was good) but the form wasn't submitting.

So if everything above doesn't work, try confirming that you're getting either true or false in the JSON returned from the remote address.

My issue had a different solution, the remote address was returning { "valid" = "something-else-other-than-true-or-false" } and that lead to weird behavior.

The field was green (that gave it the impression that it was good) but the form wasn't submitting.

So if everything above doesn't work, try confirming that you're getting either true or false in the JSON returned from the remote address.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment