ASP.NET Custom Validator + WebMethod + jQuery

I’m trying to implement a .NET Custom Validator that uses $.ajax to query a WebMethod on the same page and return a boolean value to indicate whether the result is true or false.

The WebMethod I’m using is really simple

[WebMethod()]
public static bool IsPromoValid(string code)
{
    string promoCode = "ABCDEFG";
    bool result = code.ToLower() == promoCode.ToLower();
    return result;
}

The CustomValidator looks like this

<asp:CustomValidator ID="cvPromoCode" Display="None" ControlToValidate="txtPromoCode" runat="server" ClientValidationFunction="validatePromo"
    ErrorMessage="The promo code you entered is incorrect" OnServerValidate="ValidatePromoCode" />

And the simple $.ajax() ClientValidation function

function validatePromo(src, args) {
    $.ajax({
        type: "POST",
        url: "Register.aspx/IsPromoValid",
        data: "{'code': '" + args.Value + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            args.IsValid = msg.d;
        }
    });
}

The problem is that the page validates instantly and doesn’t actually wait for the ajax call to finish. If there are any other errors on the page, it shows the Validation Summary with them, but never shows the error message from the Custom Validator.

I can see the AJAX call being made in Firebug, and it returs the right response (in this case true or false)

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The easy way is by changing your validate to:

 function validatePromo(src, args) {
    var isValid;
    $.ajax({
        type: "POST",
        url: "Register.aspx/IsPromoValid",
        data: "{'code': '" + args + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (msg) {
             isValid = msg.d;
        }        
    });
    args.IsValid = isValid;
}

Take special note of the async:false. The reason your first try didn’t work is that the ajax success callback was not getting called until after the validation scripts had already checked args.IsValid. With async:false, the $.ajax call won’t complete until after the success callback is done.

The big issue with this is that it now “blocks” whatever js thread is running the validation. In the case of ASP.Net validators, I don’t believe this is an issue but I would test it with a long-running call just to make sure you aren’t screwing up your page for anyone on a slow connection.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0