Remote validation causes double submit

I have a problem with remote validation causing a form to submit twice (and enter the success/error handler twice). The original is an ASP.NET MVC application with unobtrusive validation and jQuery Form for AJAX submitting, but I've been able to reduce to the following:

remote.json

"true"

test.html

<!doctype html>
<title>test</title>

<form action="" method="post">
    <input name="foo" type="text" value="foo">
    <br>
    <input name="bar" type="text" value="bar">
    <br>
    <input type="submit">
</form>

<script src="//code.jquery.com/jquery-2.0.3.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

<script>
    $("form").validate(
    {
        rules:
        {
            foo: { remote: { url: "remote.json" } },
            bar: { required: true }
        }
    });

    $("form").on("submit", function ()
    {
        console.log("entering the submit handler");

        if ($(this).valid())
        {
            console.log("form is valid");
        }
        else
        {
            console.log("form is invalid");
        }

        return false;
    });
</script>

When the remote validation returns "true", this is the console output:

GET http://localhost/validation/remote.json?foo=foo 200 OK
entering the submit handler
form is valid
entering the submit handler
form is valid

When the remote validation returns "false", this is the console output:

GET http://localhost/validation/remote.json?foo=foo 200 OK
entering the submit handler
form is valid

Am I doing something wrong in my submit handler? It works fine for all other forms (dozens of them). Or is this yet another bug in the library (if so, is there a workaround)?

Remote validation causes double submit

2 Answers