jQuery Remote Validation Forces Double-Click to Submit Form

Question

I am attempting to validate a form field remotely. If the field receives focus while I'm on the page, everything works great. However, if the field never receives focus, the form requires I click the "Submit" button twice in order to successfully submit.

I'd like it to either only validate if the field receives focus or somehow stop the form from requiring two clicks to submit. Anyone have any ideas?

$("#form1").validate({
    rules: {
        project: {
            required: true,
            remote: "check.php"
        }
    },
    messages: {
        project: {
            required: "Required.",
            remote: "Check Failed."
        }
    },
});

<input type="text" name="project" id="project" value="X"/>

Answer 1

Instead of making ajax setup to false you can just set "project" "remote" async to false like this

$("#form1").validate({
    rules: {
        project: {
            required: true,
            remote: {url:"check.php", async:false}
        }
    },
    messages: {
        project: {
            required: "Required.",
            remote: "Check Failed."
        }
    },
});

Answer 2

What is the name of your submit button? jQuery Validate doesn't like the name "submit." I changed the name of my submit button to "submitter," and the problem went away. Check out this link: https://github.com/jzaefferer/jquery-validation/issues/58