Question

I have a jquery ajax call asp.net web service question. I want to validate a textbox in asp.net web page.
The validator is:

<asp:CustomValidator ID="CustomValidatorUser" runat="server" ControlToValidate="TextUserName"
                                ErrorMessage="Minimum of 6 (six) alphanumeric characters." 
                 ClientValidationFunction="ValidateUserName" Display="Dynamic"
                                ValidateEmptyText="True" ></asp:CustomValidator>

The jquery code is(updated 2nd):

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="../jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$.ajax({
    type: "POST",
    url: "UserNameWebService.asmx/ValidateUserName",
    data: "{'strUsername': " + $("#TextUserName").val() + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
});
</script>
<div>
    General user information</div>
<p>
</p>
<table cellpadding="2">

The web service code is:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class UserNameWebService : System.Web.Services.WebService
{

    [WebMethod]
     public bool ValidateUserName(string strUsername)
    {
        string UserNameCreated = strUsername;
        string AD_Server = System.Configuration.ConfigurationManager.AppSettings["AD_Server"];
        DirectoryEntry entry = new DirectoryEntry(AD_Server);
        entry.AuthenticationType = AuthenticationTypes.Secure;

        DirectorySearcher deSearch = new DirectorySearcher(entry);
        deSearch.Filter = "(&(objectClass=user)(samaccountname=" + UserNameCreated + "))";

        SearchResultCollection results = deSearch.FindAll();
        Match match = Regex.Match(UserNameCreated, @"^[a-zA-Z0-9]{6,}$", RegexOptions.IgnoreCase);
        if (results.Count > 0)
            return false;
        else if (match.Success)
            return true;
        else
            return false;
    }    }

But I got an error:

ValidateUserName is undefined.

Please help me to correct the error.

Thank you very much!

Answer 1

There are actually several problems with your code.

1) $("#TextUserName") will not work in this context because asp.net will render the server-side TextBox control with a different ID. You would need to do this instead:

data: "{'strUsername': " + $("#<%=TextUserName.ClientID%>").val() + "}",

2) The json in your data attribute is not formatted correctly, you need single quotes ' around the value like this:

                       |                                              | 
                       V                                              V
data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",

3) You need to put your Jquery ajax call inside a function, which in your case is called ValidateUserName. It takes two parameters source and args. The responsibility of this function is to set the value of args.IsValid to either true or false. So you will need to provide a function to be called when the ajax call succeeds that can perform this logic. Like this:

function ValidateUserName(source, args) {
    $.ajax({
        type: "POST",
        url: "UserNameWebService.asmx/ValidateUserName",
        data: "{'strUsername': '" + args.Value + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (result) {
            args.IsValid = result.d;
        }
    });
}

4) As you can see in the code above, you don’t actually need to use jquery to get the value from the textbox because you can access it like this args.Value.

5) You need to add async: false otherwise by the time IsValid is set, the code that sets the visibility of the message will already have been executed, and so nothing will happen.