Issues making a Javascript password validator

September 1, 2022

I’m working on a password matching validator and am stuck. It seems like the code is structured correctly but it reads the passwords as matching no matter what. Also would like to know what I’m doing wrong in regards to getting the event to keep validating without reloading the page, I was hoping event++ would get the job done.

Here is the Javascript

<script>
       const pass1 = document.getElementById("password1");
       const pass2 = document.getElementById("password2");
       const p = document.getElementById("confirm")
       function passCheck () {
        if (pass1 !== pass2)   {
            return p.innerHTML= "Passwords do not match";
        }
        else {
            return p.innerHTML="Passwords match";
        }
       }
    pass2.addEventListener("keyup", function() {
        event++;
        passCheck(pass1, pass2);})
    </script>

Here is the HTML

<body>
    <div class="rSide">
      <div class="formBox">
           <form action="#" method="post">
                <div class="formLabel">
                   <label for="FName">First name</label>
                   <input type="text" id="FName" name="FName" placeholder="Your First Name" required>
                   </div>
                    <div class="formLabel">
                        <label for="LName">Last Name</label>
                        <input type="text" id="LName" name="LName" placeholder="Your Last Name" required>
                    </div>
                    <div class="formLabel">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="Your Email" required>
                    </div>
                    <div class="formLabel">
                        <label for="phone">Phone Number</label>
                        <input type="number" id="phone" name="phone" placeholder="Your Phone Number" required>
                    </div>
                    <div class="formLabel">
                        <label for="password1">Password</label>
                        <input type="text" id="password1" name="password1" required>
                    </div>
                    <div class="formLabel">
                        <label for="password2">Confirm Password</label>
                        <input type="text" id="password2" name="password2" required>
                        <p id="confirm"></p>
                    </div>
                    <button type="submit" class="account">Create Account</button><br>
                </form>

            </div>
            
            <p>Already have an account? <a>Log in</a></p>
        </div>
    </div>
</body>

>Solution :

You’re getting the elements:

const pass1 = document.getElementById("password1");

What you want are the values:

const pass1 = document.getElementById("password1").value;

Alternatively, if you need to reference the elements otherwise (such as when calling pass2.addEventListener), you can reference the values just during the comparison:

if (pass1.value !== pass2.value) {

However you want to structure the code is up to you. The main point to remember is when you’re referencing the entire HTML element and when you just want the .value from that element (specifically for <input> elements).

As an aside, you’re pass arguments to a function that doesn’t expect any: