jQuery Forum

Hi,

I've been asking around on places like Yahoo Answers and Daniweb and waited for a while but it's been a week so far no one has responded or helped me out yet... I was really hoping that someone here would be able to!

My problem is that I'm not sure how to separate the JQuery client-side and server-side validation so that the server-side ajax call only occurs once the client-side's requirements have been met.


Client-side:

1. $(document).ready(function() {
       $("#register_form").validate({
           rules: {
               username: {
                   required: true,
                   minlength: 3
               }
           },
           messages: {
               username: {
                   required: "Please specify your name",
                   minlength: "Your username should be at least 3 characters"
               }
           }
   
       });
   });
   
   

So once this is met on the form, then it should move on to the next part:

Server-side (ajax call to backend) code:

1. $(document).ready(function() {
       $("#username").keyup(function() {
           var username = $("#username").val();
           $("#availability_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...'); //Add a loading image in the span id="availability_status"
           $.ajax({
               type: "POST",
               url: "username_availability.php",
               data: "username=" + username,
               success: function(server_response) {
                   $("#availability_status").ajaxComplete(function(event, request) {
                       if(server_response == '0') {
                           $("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Available </font>');
                       //Add this image to the span with id "availability_status"
                       } else if(server_response == '1') {
                           $("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
                       }
                   });
               }
           });
           return false;
       });
   });
   
   

If anyone can help I'd really appreciate it!

Thanks so much!

-Ashton