Wordpress username availability with AJAX using Form-Validation-Engine

Well,

my previous question brought 开发者_运维问答me to use this script:

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Because of my total lack of knowledge I don't understand how can I fit the "Inline AJAX validation" with the "ajax[ajaxUser]" class to work checking username availability when setting up a new account in a Wordpress site.

Any help would be greatly appreciated. Thanks!

Finally been able to make it work.

Step 1 - First got the HTML form. In the input field where the username got to be typed you got to add the validation rules you want to apply to it, in my case this:

<input type="text" name="user_login" id="user_login" class="validate[required,length[5,15],ajax[ajaxUser]]" value="Username"/>

"required" because is a required field, "length[5,15]" helps narrow the search and "ajax[ajaxUser]" which is our custom defined regex rule.

Step 2 - To access the database used this dbConnector.php:

<?php

class DbConnector {

var $theQuery;
var $link;

function DbConnector(){

        // Get the main settings from the array we just loaded
        $host = 'HOST';
        $db = 'DATABASE';
        $user = 'root';
        $pass = 'root';

        // Connect to the database
        $this->link = mysql_connect($host, $user, $pass);
        mysql_select_db($db);
        register_shutdown_function(array(&$this, 'close'));

    }

  //*** Function: query, Purpose: Execute a database query ***
    function query($query) {

        $this->theQuery = $query;
        return mysql_query($query, $this->link);

    }

    //*** Function: fetchArray, Purpose: Get array of query results ***
    function fetchArray($result) {

        return mysql_fetch_array($result);

    }

    //*** Function: close, Purpose: Close the connection ***
    function close() {

        mysql_close($this->link);

    }

}

?>

Just need to replace the values $host, $db, $user and $pass with the ones corresponding your server and database.

Step 3 - Then create a file called validateUser.php which will take the values from the database, compare them with the information typed at the input field and inform the validation js with the result of the compare.

<?php

/* RECEIVE VALUE */
$validateValue=$_POST['validateValue'];
$validateId=$_POST['validateId'];
$validateError=$_POST['validateError'];


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

include("dbConnector.php");
$connector = new DbConnector();

$query = "SELECT user_login FROM wp_users WHERE user_login = '$validateValue' LIMIT 1";
$result = $connector->query($query);
$num = mysql_num_rows($result);

if($num == 0){      // validate??
    $arrayToJs[2] = "true";         // RETURN TRUE
    echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}';          // RETURN ARRAY WITH success
}else{
    for($x=0;$x<1000000;$x++){
        if($x == 990000){
            $arrayToJs[2] = "false";
            echo '{"jsonValidateReturn":'.json_encode($arrayToJs).'}';      // RETURN ARRAY WITH ERROR
        }
    }

}

mysql_close();

Step 4 - Totally forgot about this essential step. You got to open the file jquery.validationEngine-en.js and specify you custom regex rule. Search for this comment: "// Add your regex rules here, you can take telephone as an example" and add your new rule below it:

"ajaxUser":{
    "file":"./wp-content/themes/AtelierMomoni/library/js/validateUser.php",
    "alertTextOk":"* Great! This username is available",    
    "alertTextLoad":"* Loading, please wait",
    "alertText":"* Sorry, this username already been taken"},

That's it!