charan

199 lower case, 199 upper case, 199 digits and 199 special characters.

4 minutes ago, Ingolme said:

What exactly are you trying to match with that regular expression? It looks unnecessarily complicated. There isn't a reason to use the RegExp constructor here either.

What you're checking for with that expression is 199 strings of any length, even empty strings count, containing only the specified characters

You just need to check for a minimum of one of each type of character.

var val = myInput.value;

// Check for lowercase letters
var lowerCaseLetters = /[a-z]/;
if(lowerCaseLetters.test(val)) {  
  letter.classList.remove("invalid");
  letter.classList.add("valid");
} else {
  letter.classList.remove("valid");
  letter.classList.add("invalid");
}

// Check for uppercase letters
var upperCaseLetters = /[A-Z]/;
if(upperCaseLetters.test(val)) {  
  capital.classList.remove("invalid");
  capital.classList.add("valid");
} else {
  capital.classList.remove("valid");
  capital.classList.add("invalid");
}

// Check for numbers
var numbers = /[0-9]/;
if(numbers.test(val)) {  
  number.classList.remove("invalid");
  number.classList.add("valid");
} else {
  number.classList.remove("valid");
  number.classList.add("invalid");
}

if(val.length >= 199) {
  length.classList.remove("invalid");
  length.classList.add("valid");
} else {
  length.classList.remove("valid");
  length.classList.add("invalid");
}

 

5 minutes ago, Ingolme said:

What exactly are you trying to match with that regular expression? It looks unnecessarily complicated. There isn't a reason to use the RegExp constructor here either.

What you're checking for with that expression is 199 strings of any length, even empty strings count, containing only the specified characters

You just need to check for a minimum of one of each type of character.

var val = myInput.value;

// Check for lowercase letters
var lowerCaseLetters = /[a-z]/;
if(lowerCaseLetters.test(val)) {  
  letter.classList.remove("invalid");
  letter.classList.add("valid");
} else {
  letter.classList.remove("valid");
  letter.classList.add("invalid");
}

// Check for uppercase letters
var upperCaseLetters = /[A-Z]/;
if(upperCaseLetters.test(val)) {  
  capital.classList.remove("invalid");
  capital.classList.add("valid");
} else {
  capital.classList.remove("valid");
  capital.classList.add("invalid");
}

// Check for numbers
var numbers = /[0-9]/;
if(numbers.test(val)) {  
  number.classList.remove("invalid");
  number.classList.add("valid");
} else {
  number.classList.remove("valid");
  number.classList.add("invalid");
}

if(val.length >= 199) {
  length.classList.remove("invalid");
  length.classList.add("valid");
} else {
  length.classList.remove("valid");
  length.classList.add("invalid");
}

 

5 minutes ago, Ingolme said:

What exactly are you trying to match with that regular expression? It looks unnecessarily complicated. There isn't a reason to use the RegExp constructor here either.

What you're checking for with that expression is 199 strings of any length, even empty strings count, containing only the specified characters

You just need to check for a minimum of one of each type of character.

var val = myInput.value;

// Check for lowercase letters
var lowerCaseLetters = /[a-z]/;
if(lowerCaseLetters.test(val)) {  
  letter.classList.remove("invalid");
  letter.classList.add("valid");
} else {
  letter.classList.remove("valid");
  letter.classList.add("invalid");
}

// Check for uppercase letters
var upperCaseLetters = /[A-Z]/;
if(upperCaseLetters.test(val)) {  
  capital.classList.remove("invalid");
  capital.classList.add("valid");
} else {
  capital.classList.remove("valid");
  capital.classList.add("invalid");
}

// Check for numbers
var numbers = /[0-9]/;
if(numbers.test(val)) {  
  number.classList.remove("invalid");
  number.classList.add("valid");
} else {
  number.classList.remove("valid");
  number.classList.add("invalid");
}

if(val.length >= 199) {
  length.classList.remove("invalid");
  length.classList.add("valid");
} else {
  length.classList.remove("valid");
  length.classList.add("invalid");
}

 

Yes, Correct this will work and onkeyup function will only validate for one small letter, one upper case letter, one special char and one digit.

but what I wanted is to validate all categories to 199 length instead of one. that is what is my requirement is and that's why I have used the below regex.

var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g')

My HTML page is having password input field when I try to input values to the password input field then the page becomes unresponsive after entering more than 30 to 40 characters. Below is the code which I am using. This issue I am having in all web browsers. Even if I change the minimum length and all other like lower, upper, number and symbol value to 50 then also the same problem persist. I am new to javascript, Kindly do the needful.

What I have observed here is the regex ( new RegExp('(?:[0-9].*){' + 199 + '}', 'g')  ) used is causing this issue. If I change the value from 199 to 15 then it will work fine.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* Style all input fields */
    input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
    }

    /* Style the submit button */
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
    }

    /* Style the container for inputs */
    .container {
      background-color: #f1f1f1;
      padding: 20px;
    }

    /* The message box is shown when the user clicks on the password field */
    #message {
      display:none;
      background: #f1f1f1;
      color: #000;
      position: relative;
      padding: 20px;
      margin-top: 10px;
    }

    #message p {
      padding: 10px 35px;
      font-size: 18px;
    }

    /* Add a green text color and a checkmark when the requirements are right */
    .valid {
      color: green;
    }

    .valid:before {
      position: relative;
      left: -35px;
      content: "✔";
    }

    /* Add a red text color and an "x" when the requirements are wrong */
    .invalid {
      color: red;
    }

    .invalid:before {
      position: relative;
      left: -35px;
      content: "✖";
    }
    </style>
    </head>
    <body>

    <p>Try to submit the form.</p>

    <div class="container">
      <form action="/action_page.php">
        <label for="usrname">Username</label>
        <input type="text" id="usrname" name="usrname" required>

        <label for="psw">Password</label>
        <input type="password" id="psw" name="psw" required>
        
        <input type="submit" value="Submit">
      </form>
    </div>

    <div id="message">
      <h3>Password must contain the following:</h3>
      <p id="letter" class="invalid">199 <b>lowercase</b> letter</p>
      <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p>
      <p id="number" class="invalid">199 <b>number</b></p>
      <p id="length" class="invalid">Minimum <b>199 characters</b></p>
    </div>
    				
    <script>
    var myInput = document.getElementById("psw");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");

    // When the user clicks on the password field, show the message box
    myInput.onfocus = function() {
      document.getElementById("message").style.display = "block";
    }

    // When the user clicks outside of the password field, hide the message box
    myInput.onblur = function() {
      document.getElementById("message").style.display = "none";
    }

    // When the user starts to type something inside the password field
    myInput.onkeyup = function() {
      // Validate lowercase letters
      var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g')
      if(myInput.value.match(lowerCaseLetters)) {  
        letter.classList.remove("invalid");
        letter.classList.add("valid");
      } else {
        letter.classList.remove("valid");
        letter.classList.add("invalid");
      }
      
      // Validate capital letters
      var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g')
      if(myInput.value.match(upperCaseLetters)) {  
        capital.classList.remove("invalid");
        capital.classList.add("valid");
      } else {
        capital.classList.remove("valid");
        capital.classList.add("invalid");
      }

      // Validate numbers
      var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g')
      if(myInput.value.match(numbers)) {  
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else {
        number.classList.remove("valid");
        number.classList.add("invalid");
      }
      
      // Validate length
      if(myInput.value.length >= 199) {
        length.classList.remove("invalid");
        length.classList.add("valid");
      } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
      }
    }
    </script>

    </body>
    </html>

My HTML page is having password input field when I try to input values to the password input field then the page becomes unresponsive after entering more than 30 to 40 characters. Below is the code which I am using. This issue I am having in all web browsers. Even if I change the minimum length and all other like lower, upper, number and symbol value to 50 then also the same problem persist. I am new to javascript, Kindly do the needful.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* Style all input fields */
    input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
    }

    /* Style the submit button */
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
    }

    /* Style the container for inputs */
    .container {
      background-color: #f1f1f1;
      padding: 20px;
    }

    /* The message box is shown when the user clicks on the password field */
    #message {
      display:none;
      background: #f1f1f1;
      color: #000;
      position: relative;
      padding: 20px;
      margin-top: 10px;
    }

    #message p {
      padding: 10px 35px;
      font-size: 18px;
    }

    /* Add a green text color and a checkmark when the requirements are right */
    .valid {
      color: green;
    }

    .valid:before {
      position: relative;
      left: -35px;
      content: "✔";
    }

    /* Add a red text color and an "x" when the requirements are wrong */
    .invalid {
      color: red;
    }

    .invalid:before {
      position: relative;
      left: -35px;
      content: "✖";
    }
    </style>
    </head>
    <body>

    <p>Try to submit the form.</p>

    <div class="container">
      <form action="/action_page.php">
        <label for="usrname">Username</label>
        <input type="text" id="usrname" name="usrname" required>

        <label for="psw">Password</label>
        <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
        
        <input type="submit" value="Submit">
      </form>
    </div>

    <div id="message">
      <h3>Password must contain the following:</h3>
      <p id="letter" class="invalid">199 <b>lowercase</b> letter</p>
      <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p>
      <p id="number" class="invalid">199 <b>number</b></p>
      <p id="length" class="invalid">Minimum <b>199 characters</b></p>
    </div>
                    
    <script>
    var myInput = document.getElementById("psw");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");

    // When the user clicks on the password field, show the message box
    myInput.onfocus = function() {
      document.getElementById("message").style.display = "block";
    }

    // When the user clicks outside of the password field, hide the message box
    myInput.onblur = function() {
      document.getElementById("message").style.display = "none";
    }

    // When the user starts to type something inside the password field
    myInput.onkeyup = function() {
      // Validate lowercase letters
      var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g')
      if(myInput.value.match(lowerCaseLetters)) {  
        letter.classList.remove("invalid");
        letter.classList.add("valid");
      } else {
        letter.classList.remove("valid");
        letter.classList.add("invalid");
      }
      
      // Validate capital letters
      var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g')
      if(myInput.value.match(upperCaseLetters)) {  
        capital.classList.remove("invalid");
        capital.classList.add("valid");
      } else {
        capital.classList.remove("valid");
        capital.classList.add("invalid");
      }

      // Validate numbers
      var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g')
      if(myInput.value.match(numbers)) {  
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else {
        number.classList.remove("valid");
        number.classList.add("invalid");
      }
      
      // Validate length
      if(myInput.value.length >= 199) {
        length.classList.remove("invalid");
        length.classList.add("valid");
      } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
      }
    }
    </script>

    </body>
    </html>