Check if username exists with AngularJS

It is always a better idea to check the entered username exists or not if you are allowing the users to choose username while registration and wants it to be unique.

With this, the user will instantly know that their chosen username is available or not.

Check if username exists with AngularJS


Contents

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

 


 

1. Table structure

I am using users table in the tutorial 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 */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

 

3. HTML

Creating a basic registration form layout which has three input elements and a button.

  • Defined ng-keyup directive on username input field that calls checkUsername().
  • Add a <div > following with username input field to show the availibty status and to adjust classes on <div> define ng-class directive.

Completed Code

<body ng-app='myapp'>

 <div class="container" ng-controller='signup'>

  <div id="div_reg">
   <h1>Registration</h1>

   <div>
    <input type="text" class="textbox" id="txt_name" ng-model="name" placeholder="Name"/>
   </div>

   <!-- Username -->
   <div>
    <input type="text" class="textbox" id="txt_uname" ng-model="username" ng-keyup='checkUsername()' placeholder="Username" />
    <div ng-class="addClass(unamestatus)" >{{ unamestatus }}</div>
   </div>

   <div>
    <input type="password" class="textbox" id="txt_pwd" ng-model="password" placeholder="Password"/>
   </div>

   <div>
    <input type="submit" value="Submit" name="but_submit" id="but_submit" />
   </div>

  </div>

 </div>

</body>

 

4. CSS

/* Container */
.container{
 margin: 0 auto;
 width: 70%;
}

/* Registration */
#div_reg{
 border: 1px solid gray;
 border-radius: 3px;
 width: 470px;
 height: 370px;
 box-shadow: 0px 2px 2px 0px gray;
 margin: 0 auto;
}

#div_reg h1{
 margin-top:0px;
 font-weight: normal;
 padding:10px;
 background-color:cornflowerblue;
 color:white;
 font-family:sans-serif;
}

#div_reg div{
 clear: both;
 margin-top: 10px;
 padding: 5px;
}

#div_reg .textbox{
 width: 96%;
 padding: 7px;
}

#div_reg input[type=submit]{
 padding: 7px;
 width: 100px;
 background-color: lightseagreen;
 border: 0px;
 color: white;
}

/* Response */
.response{
 padding: 6px;
 display: block;
}
.hide{
 display: none;
}
.exists{
 color: green;
}

.not-exists{
 color: red;
}

 

5. PHP

Create new uname_check.php.

Here, check the POST username value in users table and return a response.

Completed Code

<?php

include 'config.php';

$data = json_decode(file_get_contents("php://input"));

// Username
$uname = $data->username;
 
$resText = '';

if($uname != ''){
 // Check username
 $sel = mysqli_query($con,"select count(*) as allcount from users where username = '".$uname."' ");
 $row = mysqli_fetch_array($sel);

 $resText = "Available";
 if($row['allcount'] > 0){
  $resText = 'Not available';
 }
}

echo $resText;

 

6. Script

Defined two methods –

  • checkUsername – Send $http request to check the username exists or not and initialize $scope.unamestatus with response.data.
  • addClass – Return class names according  to unamestatus value.

Completed Code

var fetch = angular.module('myapp', []);

fetch.controller('signup', ['$scope', '$http', function ($scope, $http) {
 
 // Check username 
 $scope.checkUsername = function(){
 
  $http({
   method: 'post',
   url: 'uname_check.php',
   data: {username:$scope.username}
  }).then(function successCallback(response) {
   $scope.unamestatus = response.data;
  });
 }

 // Set class
 $scope.addClass = function(unamestatus){
  if(unamestatus == 'Available'){
   return 'response exists';
  }else if(unamestatus == 'Not available'){
   return 'response not-exists';
  }else{
   return 'hide';
  }
 }

}]);

 

7. Demo

Enter text in the username field. Here, are existing usernames – yssyogesh, sona, vishal,  sunil, vijay, anil, and jiten.


 

8. Conclusion

Using above script you can alert the user whether the username exists or not.

You can the also use the script where you want to stay the entered value in the field will always unique for this you just need to adjust the code.

Always make sure to recheck the value before saving in your Database table.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *