I'm using buddypress which uses its own template form register.php for registration at http://mysite.com/register. I'm looking for a way to show the user whether or not their entered username is available using ajax validation. Here is a snippet from the form.

<?php do_action( 'template_notices' ) ?>
<?php do_action( 'bp_before_account_details_fields' ) ?>
   <div class="register-section" id="basic-details-section">
      <?php /***** Basic Account Details ******/ ?>
  <?php do_action( 'bp_signup_username_errors' ) ?>
  <input type="text" name="signup_username" id="signup_username" value="Username" />
  <?php do_action( 'bp_signup_email_errors' ) ?>
  <input type="text" name="signup_email" id="signup_email" value="Email" />
   </div><!-- #basic-details-section -->
  • Please let us know if the below answer worked – AlxVallejo Oct 29 '12 at 23:28

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('body.login div#login form#loginform input#user_login').onblur(function(){
          jQuery.post( ajaxurl
                       , {
                           '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() {
                                ## 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',
                           'data'=>'Not OK' // login exists
    } else {
         $response = array( 'what'=>'validate_user_login',
                           'data'=>'OK' // check failed, login doesn't exist
    $xmlResponse = new WP_Ajax_Response($response);

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.