Password validation for special characters in javascript

Question

I am writing a code for password validation that contains atleast: one small alphabet one capital alphabet one digit one special character min 8 and max 12 characters

but not able to validate the special character, rest all conditions mentioned above are working

HTML code:

<label for="psw"><b>Password <i class="fa fa-asterisk" style="font-size: 12px; color: red"></i>:</b></label>
<input id="pswd" name="pswd" type="password" placeholder="Enter Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-])$" title="Must contain at least one Special Character and one Number and one Uppercase and Lowercase letter, and at least 8 or more characters" required>  <br>

                <div id="message">
                    <h3>Password must contain the following:</h3>
                    <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
                    <p id="capital" class="invalid">A <b>capital (uppercase)</b>letter</p>
                    <p id="number" class="invalid">A <b>number</b></p>
                    <p id="length" class="invalid">Minimum <b>8 characters</b></p>
                    <p id="spcl" class="invalid">A <b>Special character</b></p>
                    <p id="maxlength" class="invalid">Minimum <b>8 character</b> and Maximum <b>12 character</b></p>

                </div>

Javascript

 <script type="text/javascript">
         var myInput = document.getElementById("pswd");

         var letter = document.getElementById("letter");
         var capital = document.getElementById("capital");
         var number = document.getElementById("number");
         var maxlength = document.getElementById("maxlength");
         var spcl = document.getElementById("spcl");
// 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 = /[a-z]/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 = /[A-Z]/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 = /[0-9]/g;
                            console.log(numbers);
                            if (myInput.value.match(numbers)) {
                                number.classList.remove("invalid");
                                number.classList.add("valid");
                            } else {
                                number.classList.remove("valid");
                                number.classList.add("invalid");
                            }
                            
                            var spcl = /[!@#$%^&*_=+-]/g;
                            console.log(spcl);
                            if (myInput.value.match(spcl)) {
                                spcl.classList.remove("invalid");
                                spcl.classList.add("valid");
                            } else {
                                console.log(myInput.value);
                                spcl.classList.remove("valid");
                                spcl.classList.add("invalid");
                            }


                            //Validate max length
                            if (myInput.value.length >= 8 && myInput.value.length <= 12) {
                                console.log('in min max condition');
                                console.log(myInput.value.length);
                                maxlength.classList.remove("invalid");
                                maxlength.classList.add("valid");
                            } else {
                                maxlength.classList.add("invalid");
                                maxlength.classList.remove("valid");
                            }
                        }
                    </script>

when I am checking for special character

                        var spcl = /[!@#$%^&*_=+-]/g;
                        console.log(spcl);
                        if (myInput.value.match(spcl)) {
                            spcl.classList.remove("invalid");
                            spcl.classList.add("valid");
                        } else {
                            console.log(myInput.value);
                            spcl.classList.remove("valid");
                            spcl.classList.add("invalid");
                        }

in console its showing error as : Uncaught TypeError: Cannot read properties of undefined (reading 'remove')

On printing the classList of variable 'spcl' I am getting the output as 'invalid' but still facing this Uncaught TypeError: Cannot read properties of undefined (reading 'remove')

Answer 1

check this question: Check for special characters in string

for special character use this:

var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;

if(format.test(string)){
  return true;
} else {
  return false;
}

Answer 2

With this you can check string contain the special character or not.

        //Regex for Valid Characters i.e. Alphabets, Numbers and Space.
        var regex = /^[A-Za-z0-9 ]+$/
 
        //Validate TextBox value against the Regex.
        var isValid = regex.test(document.getElementById("txtName").value);
        if (!isValid) {
            alert("Contains Special Characters.");
        } else {
            alert("Does not contain Special Characters.");
        } 

Answer 3

As I commented, you named two of your variables spcl. When you rename it, it works, there's nothing wrong with your regex. Also, I noticed you skipped min length validation, so I added it.

 var myInput = document.getElementById("pswd"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var maxlength = document.getElementById("maxlength"); var spcl = document.getElementById("spcl"); 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 = /[az]/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 = /[AZ]/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 = /[0-9]/g; console.log(numbers); if (myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); } var special = /[!@#$%^&*_=+-]/g; console.log(special); if (myInput.value.match(special)) { spcl.classList.remove("invalid"); spcl.classList.add("valid"); } else { console.log(myInput.value); spcl.classList.remove("valid"); spcl.classList.add("invalid"); } //Validate max length if (myInput.value.length >= 8 && myInput.value.length <= 12) { console.log('in min max condition'); console.log(myInput.value.length); maxlength.classList.remove("invalid"); maxlength.classList.add("valid"); } else { maxlength.classList.add("invalid"); maxlength.classList.remove("valid"); } //Validate min length if (myInput.value.length >= 8) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.add("invalid"); length.classList.remove("valid"); } }

 .invalid { color: red } .valid { color: green }

 <label for="psw"><b>Password <i class="fa fa-asterisk" style="font-size: 12px; color: red"></i>:</b> </label> <input id="pswd" name="pswd" type="password" placeholder="Enter Password" pattern="^(?=.*[az])(?=.*[AZ])(?=.*[0-9])(?=.*[!@#$%^&*_=+-])$" title="Must contain at least one Special Character and one Number and one Uppercase and Lowercase letter, and at least 8 or more characters" required><br> <div id="message"> <h3>Password must contain the following:</h3> <p id="letter" class="invalid">A <b>lowercase</b> letter</p> <p id="capital" class="invalid">A <b>capital (uppercase)</b>letter</p> <p id="number" class="invalid">A <b>number</b></p> <p id="length" class="invalid">Minimum <b>8 characters</b></p> <p id="spcl" class="invalid">A <b>Special character</b></p> <p id="maxlength" class="invalid">Minimum <b>8 character</b> and Maximum <b>12 character</b> </p> </div>