Check Username Availability with Vue.js and PHP

Live username availability checking on the registration page is the common feature on most websites.

This will notify the user whether the username is already been taken or not before submitting it.

To do this require AJAX.

Send a request to check the username on the basis of response to perform the action.

In this tutorial, I show how you can check username availability using Vue.js and PHP while inputting.

Check Username Availability with Vue.js and PHP


Contents

  1. Table structure
  2. Configuration
  3. Download & Include
  4. HTML
  5. PHP
  6. Script
  7. Demo
  8. Conclusion

1. Table structure

I am using users table in the example. I added some records to the table.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file for database configuration.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

// Create connection
$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Download & Include

  • Download the Axios package from GitHub. or you can also use CDN (https://unpkg.com/axios/dist/axios.min.js).
  • Include vue.js and axios.min.js at the end of <body>.
<script src="vue.js"></script>
<script src="axios-master/dist/axios.min.js"></script>

4. HTML

Create a textbox and <span> to show a message.

In the textbox added v-model='username' and @keyup='checkUsername()'.

To display the message in <span> added {{responseMessage}} and v-bind:class to change class according to isAvailable value.

Completed Code

<style >
.available{
  color: green;
}
.notavailable{
  color: red;
}
</style>
 
<div id='myapp'>
 
 Enter username : <input type='text' v-model='username' @keyup='checkUsername()'>
 <span v-bind:class="[isAvailable ? 'notavailable' : 'available']" >{{responseMessage}}</span>
 
</div>

5. PHP

Create a ajaxfile.php file.

Check username in the users table. If a record found then assign 1 to $found.

Return $found.

Completed Code

<?php
include "config.php";

$found = 0;
if(isset($_GET['username'])){
 
  $username = mysqli_real_escape_string($con,$_GET['username']);
  // Check username
  $result = mysqli_query($con,"select * from users WHERE username='".$username."'");

  if(mysqli_num_rows($result) > 0){
    $found = 1; 
  }
}

echo $found;
exit;

6. Script

Create 3 data variable – username, isAvaialble, and responseMessage.

Here, isAvailable is used to toggle <span> class and the responseMessage to display a message.

Define a checkUsername method.

Send GET request where pass username: username. On successful callback assign app.isAvailable = response.data.

If response.data == 0 then assign app.responseMessage = "Username is Available." otherwise app.responseMessage = "Username is not Available.".

Completed Code

var app = new Vue({
  el: '#myapp',
  data: {
    username: '',
    isAvailable: 0,
    responseMessage: ''
  },
  methods: {
    checkUsername: function(){
      var username = this.username.trim();
      if(username != ''){
 
       axios.get('ajaxfile.php', {
         params: {
           username: username
         }
       })
       .then(function (response) {
         app.isAvailable = response.data;
         if(response.data == 0){
           app.responseMessage = "Username is Available.";
         }else{
           app.responseMessage = "Username is not Available.";
         }
       })
       .catch(function (error) {
         console.log(error);
       });

     }else{
       this.responseMessage = "";
     }
   }
  }
})

7. Demo

View Demo


8. Conclusion

It is better to prevent the user from selecting an existing username before submitting the form.

Also, check the username availability while inserting the record.

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

Leave a Comment