如何在表单验证jQuery中使用用户名可用性检查器脚本

Question

I am new to jquery. has i got the following code to check the username availability.

The script is working fine. to check the username avialble or not.

  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

 <script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
 var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
 if(availname!=''){
 $('.check').show();
 $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');

 var String = 'username='+ availname;

   $.ajax({
       type: "POST",
      url: "available.php",
      data: String,
      cache: false,
      success: function(result){
           var result=remove_whitespaces(result);
           if(result==''){
                   $('.check').html('<img src="image/accept.png" /> This Username Is Avaliable');
                   $(".check").removeClass("red");
                   $('.check').addClass("green");
                   $(".user_name").removeClass("yellow");
                   $(".user_name").addClass("white");
           }else{
                   $('.check').html('<img src="image/error.png" /> This Username Is Already Taken');
                   $(".check").removeClass("green");
                   $('.check').addClass("red")
                   $(".user_name").removeClass("white");
                   $(".user_name").addClass("yellow");
           }
      }
  });
   }else{
     $('.check').html('');

  }
  });
  });

 function remove_whitespaces(str){
 var str=str.replace(/^\s+|\s+$/,'');
 return str;
}

available.php contains following code.

  if(isset($_POST['username']) && !empty($_POST['username'])){
  $username=mysql_real_escape_string($_POST['username']);
  $query="select * from sell where LOWER(uname)='$username'";
  $res=mysql_query($query);
  $count=mysql_num_rows($res);

  if($count > 0){
      echo "true";

  }else{
      echo "false";

  }
 }

Everything works fine. the ajax posting and checking the value exists or not.

But my problem is How i can include the above script in the following jquery validation script.

       $(document).ready(function(){
       $("#f2").validate({
         debug: false,
      rules: {    
              name: {
         required:true,
         minlength:3
//Here how to call the above script function..i stuck here..

            }
           });
           });

Based on the name availability i need to process the form to submit.php other wise the form won't be submitted..

Any suggestions,Acceptable.

Answer 1

Add this script in validation function

<script>
   $(document).ready(function(){
   $("#f2").validate({
     debug: false,
     rules: {
        name: {
           required:true,
           minlength:3,
           remote:{
              url: "available.php",
              type: "post",
              data: {
                username: function() {
                   return $( ".user_name" ).val();
                }
              }
           }
        }
     }
   });
</script>

Remove "keyup" event function and than you are done...