JQuery Validation Plugin: remote method data issue

Question

I'm using the jquery validation control remote method to test if an email address already exists in the database. Everything works fine the first time validation fires. However, on subsequent validations, the data being passed to the web service is the old data and not the new data entered into the textbox.

e.g. An email address is typed into the email textbox, validation fires, the result is as expected. The email address is changed, the validation fires again, but on inspecting FireBug the ajax data is the old data not the new.

So the following data is always passed no matter what is in the textbox. {'email':'[email protected]'}

e.g. These are the rule settings.

rules: {
        <%=txtGuestEmail.UniqueID%>: {
            email: true,
            remote: {
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                async: false,
                url: 'ajaxCheckout1.asmx/IsEmailAvailable',
                // Use data filter to strip .d explained here http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/
                dataFilter: function(data) {
                    var msg = eval('(' + data + ')');
                    // If the response has a ".d" top-level property, return what's below that instead.
                    if (msg.hasOwnProperty('d'))
                        return msg.d;
                    else
                        return msg;
                },
                dataType: 'json',
                data: "{'email':'" + $('#ctl00_PageContent_txtGuestEmail').val() + "'}"
            }
        },

Answer 1

The reason this happens is because the value of the email field is captured at page load and it is no longer refreshed. A solution would be to add the remote rule to this field separately:

$('#myform').validate(
{
    ...
});

$('#ctl00_PageContent_txtGuestEmail').rules('add', {
    remote: function () {
        return {
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: 'ajaxCheckout1.asmx/IsEmailAvailable',
            dataFilter: function(data) {
                var msg = eval('(' + data + ')');
                if (msg.hasOwnProperty('d'))
                    return msg.d;
                else
                    return msg;
            },
            dataType: 'json',
            data: "{'email':'" + $('#ctl00_PageContent_txtGuestEmail').val() + "'}"
        };
    }
});

Answer 2

Here's the final code with a little cleanup.

$('input[name=<%=txtGuestEmail.UniqueID%>]').rules('add', {
    remote: function () {
        return {
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: 'ajaxCheckout1.asmx/IsEmailAvailable',
            dataFilter: function(data) {
                var msg = eval('(' + data + ')');
                if (msg.hasOwnProperty('d'))
                    return msg.d;
                else
                    return msg;
            },
            dataType: 'json',
            data: "{'email':'" + $('input[name=<%=txtGuestEmail.UniqueID%>]').val() + "'}"
        };
    }
});