views:

534

answers:

2

I use the JQuery Validation plugin to validate a form (http://docs.jquery.com/Plugins/Validation/)

For example, I can validate an email in a form.

What I would like to do is to validate if the username chosen already exists. So, I need to call a server method that query the database. How can I do that ?

UPDATE

From balexandre answer, I try the following :

$.validator.addMethod("userName", 
    function(value, element)
    {
        $.get
        (
            "CheckUser.aspx?User=" + value, 
            function(data) 
            {
                if (data == "True") 
                {
                    return false;
                }
                else if (data == "False") 
                {
                    return true;
                }
                else 
                {
                    alert(data);
                }
            }
        );
    },
    "User already exists");

    $(document).ready
    (
        function() 
        {
            $("#aspnetForm").validate
            (
                {
                    rules: 
                    {
                        <%=txtUserName.UniqueID %>: 
                        {
                            required: true,
                            email: true,
                            userName: true                        
                        }
                    }
                }
            );
        }
    );

In the Response, I write a boolean (True of False) instead of 1 ou 0.

I know that my validation function is call. The problem is that it's always show the error message even if the user doesn't exists. I try to put an alert message before the return true to see if it's reach, and it is. So I don't get, why it's doesn't work...

A: 

This should do the trick...

http://riderdesign.com/articles/Check-username-availability-with-JQuery-and-ASP.NET.aspx

OR...

One answer shows how to call a service & the second shows how to call a page method.

http://stackoverflow.com/questions/886903/calling-asp-net-server-side-method-via-jquery

klabranche
+2  A: 

quite easy and it's a nice thcnique that I apply a lot over my projects

1 - create an aspx page called verifyUserAvailability.aspx with code-behind file

2 - delete all lines except the first in the aspx file

3 - in the code-behind file inside the Page_Load event call your database like

protected void Page_Load(object sender, EventArgs e) {
    string username = Request["usr"];
    int r = 0;

    if(!String.IsNullOrEmpty(username))
        if( yourDAL.getUserAvailability(username) )
            // your method would send true if user is available to be used
            r = 1;

   Response.Clear();
   Response.Write(r);
   Response.Flush();
}

4 - now in your form page, create a button like

<input id="btnCheckAvailability" type="button" 
       value="Check availability" 
       onclick="javascript:checkAvailability();" />

5 - create the checkAvailability() method

<script type="text/language">

    function checkAvailability() {
        var $user = $("#UsernameInputBox");
        $.get("verifyUserAvailability.aspx?usr=" + $user.val(), function(data) {
            // this will call the page passing the username and return 1 or 0
            if( data == "1" ) 
                $user.css("background-color", "green");
            else 
                $user.css("background-color", "red");
        });
    }

</script>
balexandre