Disable Textbox in 3 Failure Login Attempts in Javascript

Submitted by: 
Language: 
Visitors have accessed this post 2510 times.

In this tutorial we are going to learn how to disable text box in 3 failure login attempts. The user is only given 3 chances to enter the correct username and password.
Username: test
Password: test
You can modify the username and password inside the script.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table{
  6. margin:auto;
  7. }
  8. input{
  9. border:1px solid #888;
  10. padding:5px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script type = "text/javascript">
  16.  
  17. var count = 2;
  18. function validate() {
  19. var un = document.myform.username.value;
  20. var pw = document.myform.pword.value;
  21. var valid = false;
  22.  
  23. var unArray = ["admin", "test", "sample"];
  24. var pwArray = ["admin", "test", "sample"];
  25.  
  26. for (var i=0; i <unArray.length; i++) {
  27. if ((un == unArray[i]) && (pw == pwArray[i])) {
  28. valid = true;
  29. break;
  30. }
  31. }
  32.  
  33. if (valid) {
  34. alert ("Login was successful");
  35. window.location = "<a href="http://www.google.com";
  36. return" rel="nofollow">http://www.google.com";
  37. return</a> false;
  38. }
  39.  
  40. var t = " tries";
  41. if (count == 1) {t = " try"}
  42.  
  43. if (count >= 1) {
  44. alert ("Invalid username and/or password. You have " + count + t + " left.");
  45. document.myform.username.value = "";
  46. document.myform.pword.value = "";
  47. setTimeout("document.myform.username.focus()", 25);
  48. setTimeout("document.myform.username.select()", 25);
  49. count --;
  50. }
  51.  
  52. else {
  53. alert ("Still incorrect! You have no more tries left!");
  54. document.myform.username.value = "No more tries allowed!";
  55. document.myform.pword.value = "";
  56. document.myform.username.disabled = true;
  57. document.myform.pword.disabled = true;
  58. return false;
  59. }
  60.  
  61. }
  62.  
  63. </script>
  64.  
  65. <table cellpadding="5">
  66. <form name = "myform">
  67. <tr>
  68. <td><label>Username: </label></td><td> <input type="text" name="username"></td>
  69. </tr>
  70. <tr>
  71. <td><label>Password: </label></td><td> <input type="password" name="pword"></td>
  72. </tr>
  73. <tr>
  74. <td></td><td><input type="button" value="Log In" name="Submit" onclick= "validate()"></td>
  75. </tr>
  76. </form>
  77. </table>
  78. </body>
  79. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.