jquery - form ajax database check for unique value

In order to validate value to server side, you should add new Validation Method.

$().ready(function() {

    $.validator.addMethod("checkUserName", 
        function(value, element) {
            var result = false;
            $.ajax({
                type:"POST",
                async: false,
                url: "check-username.php", // script to validate in server side
                data: {username: value},
                success: function(data) {
                    result = (data == true) ? true : false;
                }
            });
            // return true if username is exist in database
            return result; 
        }, 
        "This username is already taken! Try another."
    );

    // validate signup form on keyup and submit
    $("#register-form").validate({
        rules: {
            "username": {
                required: true,
                checkUserName: true
            }
        }
    });
});        

As stated above, method checkUserName will verify to server side and give error message "This username is already taken! Try another." if username is not exist.

For more info and examples about jQuery Validation and its method : click here.

Hopefully this help.

Didn't check the rest of your code, but try this:

<?php
    $searchVal = $_POST['username'];
    try {
        $dbh = new PDO("mysql:host=$hostname;dbname=$data", $username, $password);
        $sql = "SELECT * FROM users WHERE USERNAME = " . "'" . $searchVal .  "'";
        $stmt = $dbh->query($sql);
        $result = $stmt->fetch(PDO::FETCH_ASSOC);

        if($result>0) {
            $valid = "true";
        } else {
            $valid = "false";
        }

        $dbh = null;

        echo $value;
    }
    catch(PDOException $e) {
        echo $e->getMessage();
    }       

?>

This is a solution using a different plugin from here. For checking name availability using Ajax calls make following:

After downloading attach jquery.validationEngine.js and your locale like:

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

Note, that en locale is also compulsory to be included.

Open and modify your language file, you have to point where is your php file which will check the database for name availability or to use default file name. So, find the following rows in jquery.validationEngine-en.js in case you use English.

 "ajaxUserCallPhp": {
    "url": "phpajax/ajaxValidateFieldUser.php",

Here you can change file name if you want like:

 "ajaxUserCallPhp": {
    "url": "my-file_which_will_check_db.php",

And your my-file_which_will_check_db.php should look like:

<?
/* RECEIVE VALUE */
$validateValue=$_REQUEST['fieldValue'];
$validateId=$_REQUEST['fieldId'];

$validateError= "This username is already taken";
$validateSuccess= "This username is available";

/* RETURN VALUE */
$arrayToJs = array();
$arrayToJs[0] = $validateId;

$dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass); //Connect with your credentials
$stmt = $dbh->query("SELECT * From `users` WHERE `USERNAME` = '{$validateValue}'"); 
$dbh = null;                    // Disconnect

sleep(1); /*added because check is very fast and the label 'checking...' is not visible*/

if ($result = $stmt->fetch()) { 
$arrayToJs[1] = false;          // found user with that name
echo json_encode($arrayToJs);           
}
else {
$arrayToJs[1] = true;
echo json_encode($arrayToJs);       // that user name is free
}
?>

Finally, your HTML markup should look like:

<input type="text" name="user_name" id="user_name" class="validate[required],custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCallPhp] text-input" />

Note additional class attribute here.

And include following script:

<script>
  $(document).ready(function(){
  $("#register_form").validationEngine();
  });
</script>