How to check username availability with ajax at registration

Question

The following untested code should get you started. Basically you add a display target on your form, add some javascript to add the validation when the user leaves the username field, and the server-side code to enqueue the javascript, and register the ajax actions.

Let me know what breaks, as I’m sure this will not run out of the box.

[!--HTML to add to registration form after user_name (replace square brackets w/angled) --]
[div id="validate_user_login_results"][/div]


## contents of validate_login.js
##
jQuery(document).ready(function(){
     jQuery('body.login div#login form#loginform input#user_login').onblur(function(){
          jQuery.post( ajaxurl
                       , {
                           'action':'validate_user_login',
                           'username': $('body.login div#login form#loginform input#user_login').val()
                         }
                       , function(response){
                            var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
                            jQuery.each( res.responses, function() {
                                $('#validate_user_login_results').load($this.data);
                                $("#validate_user_login_results").fadeIn("fast");
                                ## if $this.data == 'OK' then success action else failure action
                            }
                         }
                     );
     });
});

// add to site plugin or functions.php
//
function wpse64865_add_validate_login_js(){  
  wp_enqueue_script( 'validate_login.js'
                     , get_bloginfo('template_directory') 
                      . "/scripts/validate_login.js" // change this to correctly locate javascript
                      , array( 'jquery','wp-ajax-response' ) ); 
}  
add_action( 'init', 'wpse64865_add_validate_login_js' );

add_action('wp_ajax_validate_user_login', 'wpse64865_ajax_validate_user_login');
add_action('wp_ajax_validate_nopriv_user_login', 'wpse64865_ajax_validate_user_login');


function wpse64865_ajax_validate_user_login() {
    //Handle request then generate response using WP_Ajax_Response
    $username = $_REQUEST['username'];

    if ( validate_username( $username )) {
        $response = array( 'what'=>'validate_user_login',
                           'action'=>'validate_user_login_results',
                           'id'=>'1',
                           'data'=>'Not OK' // login exists
                          );
    } else {
         $response = array( 'what'=>'validate_user_login',
                           'action'=>'validate_user_login_results',
                           'id'=>'1',
                           'data'=>'OK' // check failed, login doesn't exist
                          );
    }
    $xmlResponse = new WP_Ajax_Response($response);
    $xmlResponse->send();
}

Edit: added missing semicolon to the code of functions.php

Related Posts: