charan
Members-
Posts
4 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
charan's Achievements
Newbie (1/7)
0
Reputation
-
199 lower case, 199 upper case, 199 digits and 199 special characters.
-
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>
-
charan joined the community
-
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>