Check Username Availability with Vue.js and PHP
Live username availability checking on the registration page is the common feature in most of the website.
This will notify the user whether the username is already been taken or not before submitting.
To do this require AJAX.
Send a request to check the username on the bases of response perform the action.
In this tutorial, I show how you can check username availability using Vue.js and PHP.
1. Table structure
I am using users
table in the example.
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.
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. HTML
Create a textbox and <span>
to show 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>
4. PHP
Create a ajaxfile.php
file.
Check username in the users
table. If record found then assign 1
to $found
.
Return $found
.
Completed Code
<?php
include "config.php";
$username = "";
$found = 0;
if(isset($_GET['username'])){
$username = mysqli_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;
5. 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 = "";
}
}
}
})
6. Conclusion
It is better to prevent the user from selecting existing username before submitting the form.
Also, check the username availability while inserting the record.
You can view working demo of tutorial example here.
Originally published at makitweb.com on April 16, 2018.