Want to fix the validation of password using jQuery [duplicate]

Question

I am Trying to Validate a Password field using jQuery

I have just added some jQuery code to Validate a password field, Till now I have only added some jQuery code so that it tells that a password is weak. I am using the append method of jQuery to append elements to display appropriate messages like (weak passwords, moderate passwords, etc...) But I dont know Why it is not working!

My main goal is to display a message 'Weak password' when the password length is less than 8 characters

Here is my index.html file:

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
    
    <div class="form-inline">
      <label for="pwd">Password:</label>
      <input type="text" id="pwd" placeholder="Enter password" name="pswd" class="pwd">
      <button type="submit" class="submit">Submit</button>
    </div>
    <script src="index.js"></script>
    </body>
    </html>

Here is styles.css if you need:

body {font-family: Arial, Helvetica, sans-serif;}
    * {box-sizing: border-box;}
    
    .form-inline {  
      display: flex;
      flex-flow: row wrap;
      align-items: center;
    }
    
    .form-inline label {
      margin: 5px 10px 5px 0;
    }
    
    .form-inline input {
      vertical-align: middle;
      margin: 5px 10px 5px 0;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
    }
    
    .form-inline button {
      padding: 10px 20px;
      background-color: dodgerblue;
      border: 1px solid #ddd;
      color: white;
      cursor: pointer;
    }
    
    .form-inline button:hover {
      background-color: royalblue;
    }
    
    @media (max-width: 800px) {
      .form-inline input {
        margin: 10px 0;
      }
      
      .form-inline {
        flex-direction: column;
        align-items: stretch;
      }
    }

And here is index.js file:

$(document).ready( () => {
    length_pass = $(".pwd").length;
$(".submit").on("click", () => {
    if(length_pass < 8) {
        $(".pwd").append("<p>Weak Password</p>");
    }
})
})

When you will run this all code, you will notice that when the password length is less than 8 characters it doesn't display the message 'Weak password' as you can see in index.js file

I am pretty much beginner so that's why I am asking these questions but Forgive me

You need to set length_pass in the click handler, not at top-level. And you have to use .val() to get the value of the input. — Barmar
Didnt work here is my updated index.js file: $(document).ready( () => { $(".submit").on("click", () => { length_pass = $(".pwd").val(); if(length_pass.length < 8) { $(".pwd").append("<p>Weak Password</p>"); } }) }) — Ayan Liaqat

Sandushi Dileka Sandushi Dileka · Accepted Answer · 2022-07-28T16:32:50

I think it is better if you can show the validation message just below the password. And you can use the below code.

body {font-family: Arial, Helvetica, sans-serif;}
    * {box-sizing: border-box;}
    
    .form-inline {  
      display: flex;
      flex-flow: row wrap;
      align-items: center;
    }
    
    .form-inline label {
      margin: 5px 10px 5px 0;
    }
    
    .form-inline input {
      vertical-align: middle;
      margin: 5px 10px 5px 0;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
    }
    
    .form-inline button {
      padding: 10px 20px;
      background-color: dodgerblue;
      border: 1px solid #ddd;
      color: white;
      cursor: pointer;
    }
    
    .form-inline button:hover {
      background-color: royalblue;
    }
     #password-strength-status {
                padding: 5px 10px;
                color: red;
                border-radius: 4px;
                margin-top: 5px;
            }
    
    @media (max-width: 800px) {
      .form-inline input {
        margin: 10px 0;
      }
      
      .form-inline {
        flex-direction: column;
        align-items: stretch;
      }
    }

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
    
    <div class="form-inline">
      <label for="pwd">Password:</label>
      <input type="text" id="pwd" placeholder="Enter password" name="pswd" class="pwd">
      <div id="password-strength-status"></div> 
      <button type="submit" id="btn" class="submit">Submit</button>
    </div>
    <script>
    $(document).ready( () => {
      $("#btn").on('click', function () {
        if ($('#pwd').val().length < 8) {
           $('#password-strength-status').html("Weak (should be atleast 8 characters.)");
        }
        else{
           $('#password-strength-status').html("")
        }
      })
    })
    </script>
    </body>
    </html>

if you want to validate the password when typing the password, you can refer this link to get the code. https://www.w3schools.com/howto/howto_js_password_validation.asp

Want to fix the validation of password using jQuery [duplicate]

1 Answers