How to Disable Submit Button on Three Unsuccessful Login Attempts in PHP

This tutorial tackles how to disable submit or submit button if three unsuccessful login attempts are made. In this tutorial, we are going to make use of PHP sessions. Adding a submit button on the form makes the form dependent on the button meaning that if the button is disabled, the form won't be submitted.

Getting Started

I've used Bootstrap in this tutorial which is included in the downloadable but if you want, you can download it yourself using this link.

Creating our Database

First, we create a database that contains our sample user that you can use.

I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named dbase.

To create a sample table of user and insert a sample user credential in the database programmatically, just copy the code below and paste it into the SQL tab in your database at PHPMyAdmin.

  1. CREATE TABLE `users` (
  2. `username` varchar(50) NOT NULL,
  3. `password` varchar(60) NOT NULL
  4.  
  5. INSERT INTO `users` (`id`, `username`, `password`) VALUES
  6. (1, 'nurhodelta', '$2y$10$AP027M5jhULJPIBAUiCa0e0phP1UAQBlKqTLLQZ2.UL44x5DdUwHq');

Creating our Login Form

Next, we create our sample login form. Create a new file, name it as index.php and paste the codes below.

  1. <?php
  2. //check if can login again
  3. if(isset($_SESSION['attempt_again'])){
  4. $now = time();
  5. if($now >= $_SESSION['attempt_again']){
  6. unset($_SESSION['attempt']);
  7. unset($_SESSION['attempt_again']);
  8. }
  9. }
  10.  
  11. //set disable if three login attempts has been made
  12. $disable = '';
  13. if(isset($_SESSION['attempt']) && $_SESSION['attempt'] >= 3){
  14. $disable = 'disabled';
  15. }
  16.  
  17. ?>
  18. <!DOCTYPE html>
  19. <html>
  20. <head>
  21. <meta charset="utf-8">
  22. <title>How to Disable Submit Button on Three Unsuccessful Login Attempts</title>
  23. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  24. </head>
  25. <body>
  26. <div class="container">
  27. <h1 class="page-header text-center">Disable Submit Button on 3 Attempts</h1>
  28. <div class="row">
  29. <div class="col-sm-4 col-sm-offset-4 panel panel-default" style="padding:20px;">
  30. <form method="POST" action="login.php">
  31. <p class="text-center" style="font-size:25px;"><b>Login</b></p>
  32. <hr>
  33. <div class="form-group">
  34. <label for="username">Username:</label>
  35. <input type="text" name="username" id="username" class="form-control" placeholder="nurhodelta">
  36. </div>
  37. <div class="form-group">
  38. <label for="password">Password:</label>
  39. <input type="password" name="password" id="password" class="form-control" placeholder="malynisheart">
  40. </div>
  41. <button type="submit" name="login" class="btn btn-primary" <?php echo $disable; ?>><span class="glyphicon glyphicon-log-in"></span> Login</button>
  42. </form>
  43. <?php
  44. if(isset($_SESSION['error'])){
  45. ?>
  46. <div class="alert alert-danger text-center" style="margin-top:20px;">
  47. <?php echo $_SESSION['error']; ?>
  48. </div>
  49. <?php
  50.  
  51. unset($_SESSION['error']);
  52. }
  53.  
  54. if(isset($_SESSION['success'])){
  55. ?>
  56. <div class="alert alert-success text-center" style="margin-top:20px;">
  57. <?php echo $_SESSION['success']; ?>
  58. </div>
  59. <?php
  60.  
  61. unset($_SESSION['success']);
  62. }
  63. ?>
  64. </div>
  65. </div>
  66. </div>
  67. </body>
  68. </html>

Creating our Login Script

Lastly, we create our login script that checks our users. Create a new file, name it as login.php and paste the codes below.

  1. <?php
  2.  
  3. if(isset($_POST['login'])){
  4. //connection
  5. $conn = new mysqli('localhost', 'root', '', 'dbase');
  6.  
  7. //set login attempt if not set
  8. if(!isset($_SESSION['attempt'])){
  9. $_SESSION['attempt'] = 0;
  10. }
  11.  
  12. //get the user with the email
  13. $sql = "SELECT * FROM users WHERE username = '".$_POST['username']."'";
  14. $query = $conn->query($sql);
  15. if($query->num_rows > 0){
  16. $row = $query->fetch_assoc();
  17. //verify password
  18. if(password_verify($_POST['password'], $row['password'])){
  19. //action after a successful login
  20. //for now just message a successful login
  21. $_SESSION['success'] = 'Login successful';
  22. //unset our attempt
  23. unset($_SESSION['attempt']);
  24. }
  25. else{
  26. $_SESSION['error'] = 'Password incorrect';
  27. //this is where we put our 3 attempt limit
  28. $_SESSION['attempt'] += 1;
  29. //set the time to allow login if third attempt is reach
  30. if($_SESSION['attempt'] == 3){
  31. $_SESSION['attempt_again'] = time() + (5*60);
  32. //note 5*60 = 5mins, 60*60 = 1hr, to set to 2hrs change it to 2*60*60
  33. }
  34. }
  35. }
  36. else{
  37. $_SESSION['error'] = 'No account with that username';
  38. //you can add error attempt here as well if you want :)
  39. }
  40.  
  41.  
  42.  
  43. }
  44. else{
  45. $_SESSION['error'] = 'Fill up login form first';
  46. }
  47.  
  48. header('location: index.php');
  49.  
  50. ?>
DEMO

You can use the log-in credential provided in the placeholder of the inputs.

And that ends this tutorial. I hope this simple tutorial will be useful for your future PHP Project. Explore more on this website for more tutorials and Free Source Code.

Happy coding :)

Add new comment