Verify a WordPress Username is Available Before User Submits Registration Form

Programmers

Verify WordPress Username is Available Before User Submits Registration FormWordPress has some nice features built into its registration process. It automatically verifies that the username is available, email isn’t already registered, etc. But it verifies AFTER the user submits the form, making it a bit inelegant.

Using AJAX, we can double-check the user is available (and anything else we want!) and return feedback before the user submits the form. To do this, we’ll need two things: an extra PHP page added to your theme and some jQuery.

The jQuery

For most of my jQuery, I use the WordPress plugin Global Javascript by Julien Law, CTLT. It not only will add the link to the jQuery library for you, but it also provides an easy way in-browser under APPEARANCE -> GLOBAL JAVASCRIPT to edit within WordPress. You can of course use whatever you feel comfortable with.

Once your jQuery page is ready to go, start with the document ready, and then we’ll connect everything we do with clicking the submit button on the register form.

jQuery(document).ready(function($){
$('#registerform #wp-submit').submit(function(){
});
});

You’ll want to double-check two items here – that the form ID on your register page is actually “registerform”, and that the ID of the submit button is “wp-submit”. Those are default, but if you’ve already made changes to the registration form, the IDs might be different.

Reminder: the WordPress default registration page is /wp-login.php?action=register
If it says your registration is disabled, go to your WordPress dashboard, SETTINGS->GENERAL and click the box that says “anyone can register”.

Next we’ll do the heavy lifting – getting the values we need and sending them to our PHP page. The full jQuery is below, but don’t freak out! It’s actually fairly simple.

First, we remove any errors (line 3) that were added the last time they submitted the form (line 20). If it’s the first time, line 3 won’t do anything. Next, we’ll use a variable “e” (line 4) to see if the form will return true or false (we check in line 25). If there are errors, we’ll change the “e” variable to 1, else it will stay 0.

In line 5, we get the information from the “user_login” input area. Double-check your input for the username/login on your registration form to confirm that the ID is “user_login”. The “.val()” function simply gets the value from that input box.

Line 6 does our last real user-side evaluation. It checks to confirm the username isn’t empty and that it’s not under 5 characters (using the “.length” at the end of any variable finds the number of characters in that variable). If either of these (using the || sign, meaning OR) are true, we add an error div after the “user_login” input area with our error in it. All errors should be added into a Div with the same class name (it’s “error” below). That way, we can easily remove them (line 3) each time the user clicks the submit button. We also change the “e” variable to 1, since we’ve got an error.

jQuery(document).ready(function($){
$('#registerform #wp-submit').submit(function(){
$('.error').remove();
e = 0;
var UN = $('#user_login').val();
if (UN === '' || UN.length < 5){
$('#user_login').after('<div class="error">Your username must be at least 5 characters long.</div>');
e = 1;
}
dataString = 'user_login=' + UN; //addon using &variable=value
$.ajax({
type: "POST",
url: "/register-form-precheck.php",
data: dataString,
dataType:"json",
complete: function(data) {
errorS = data.responseText;
errorSA = JSON.parse(errorS);
if (errorSA.UN == '1'){
$('#user_login').after('<div class="error">Username is not available.</div>');
e = 1;
}
}
});
if (e == 1){
return false;
} else if (e === 0){
return true;
}
});
});

Now we get to the fun AJAX stuff! Line 10 creates our variable string (datastring) that we’ll pass to the PHP page. If you’re sending more than one variable, continue to add variables using this format, but add an “&” symbol at the start of each new variable, just like a normal GET string.

The URL will be the URL of your new PHP page.

We’re using “dataType:json” in line 15 so that you can pass an array of values back (like checking username, email, etc.) even though in this example our array will only be passing back one variable.

Line 17 and 18 were the weirdest to me; 17 gets all the text back, and line 18 will change the string we received back into a Javascript object (like an associative array). To access any item in our new Javascript object, you use “array.key”. Our array is called “errorSA”, and the key we’ll be passing back (on our PHP page, coming up!) will be UN. So line 19, we check the value by referencing “errorSA.UN”. If it equals 1, then we’ve got an error because that username already exists. That’s not pulled out of the air, by the way. We’ll be setting those values in the PHP page ourselves. If there’s an error, we add another error div and set the variable “e” to 1.

Finally, lines 25 – 29 see if there are any errors (our variable “e” ever got set to 1), and if not, we return true so the form can be submitted.

Whew! That was fun! Next week is on to the PHP page coding.

Comments
  • Sarah says:

    Hi Kim, did you ever release the PHP section of this tutorial? If so, please can you point me in the right direction? Thanks!

  • Marcelo says:

    Hello Kim Awesome article.

    I’m new to programming, I found this feature very interesting for the wordpress user registration form, I’d like to implement it on my site. I understand that Ia need to create a javascript document to insert the code that you provided. Should I put this file in the js folder of my theme? I’m using twenty sixteen.
    Thank you for any help.