在允许用户提交表单 JS 之前，我如何检查密码是否与确认密码匹配

Question

Basically I have a sign-up form, I want the password and confirm password field to match before the user is allowed to submit the form. I have the password and confirm password matching logic but do not know how to disable user from submitting if they do not match

This is my form in my html

<form action="/register" method="post" novalidate class="mt-4" class="form">
                        <div class="mb-3">
                        <label for="username" class="form-label">Company Name*</label>
                        <input type="text" class="form-control" required id="username" name="username"
                            placeholder="Facebook Ltd">
                        </div>
                        <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">Email address*</label>
                            <input type="email" class="form-control" required id="exampleInputEmail1" aria-describedby="emailHelp"
                                placeholder="John@gmail.com" name="email">
                            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password*</label>
                            <input type="password" class="form-control password" required id="password
                                placeholder="Min 8 Characters" name="password">
                        </div>
                        <div class="mb-3">
                            <label for="confirm-password" class="form-label">Confirm Password*</label>
                            <input type="password" class="form-control confirm-password" required id="confirm-password" placeholder="Must Match">
                            <span class="matching-txt mt-1">Not Matching</span>
                        </div>
                        <button class="confirm-pwd" type="submit" class="btn  mt-3 submit-btn">Sign-up</button>
                    </form>

This is my logic to compare the password field and confirm password field on keyup

// Password and Confirmed passwords validation
let pwd = document.querySelector('.password');
let confirmPwd = document.querySelector('.confirm-password')
let matchingTxt = document.querySelector('.matching-txt')
let form = document.querySelector('.form')
function comparePwd() {
    if (confirmPwd.value) {
    if (pwd.value != confirmPwd.value) {
       matchingTxt.style.display = 'block'
       matchingTxt.style.color = 'red'
       matchingTxt.innerHTML = 'Not Matching'
       e.preventDefault()

    } else {
        matchingTxt.style.display = 'block'
        matchingTxt.style.color = 'green'
        matchingTxt.innerHTML = 'Matching'
    }
} else {
    matchingTxt.style.display = 'none'
}
}

confirmPwd.addEventListener('keyup' , () => {
    comparePwd()
})

pwd.addEventListener('keyup' , () => {
    comparePwd()
})

How do I do it in a way that if passwords do not match user cannot submit the form.

Answer 1

A HTML form element can take use of a special comparison function before submitting by populating its onsubmit attribute. That means the novalidate attribute must not be present.

Your comparePwd() function just needs a little tweak: it needs to return false , in case something is wrong - eg the passwords do not match.

So simply change the form to this:

<form action="/register" method="post" onsubmit="return comparePwd()" class="mt-4" class="form">

and the comparison function to this:

function comparePwd() {
    if (confirmPwd.value) {
    if (pwd.value != confirmPwd.value) {
       matchingTxt.style.display = 'block'
       matchingTxt.style.color = 'red'
       matchingTxt.innerHTML = 'Not Matching'
       return false
       e.preventDefault()

    } else {
        matchingTxt.style.display = 'block'
        matchingTxt.style.color = 'green'
        matchingTxt.innerHTML = 'Matching'
    }
} else {
    matchingTxt.style.display = 'none'
}
}

Answer 2

Add this to your code

let submitBtn = document.getElementById("submitBtn");

and add id to the button to make it match:

<button class="confirm-pwd" type="submit" class="btn  mt-3 submit-btn" id="submitBtn">Sign-up</button>

This way you can disable the button when the 2 fields do not match

if (pwd.value != confirmPwd.value) {
       matchingTxt.style.display = 'block'
       matchingTxt.style.color = 'red'
       matchingTxt.innerHTML = 'Not Matching'
       e.preventDefault()
       submitBtn.disabled = true
    } else {
        matchingTxt.style.display = 'block'
        matchingTxt.style.color = 'green'
        matchingTxt.innerHTML = 'Matching'
        submotBtn.disabled = false
    }

Answer 3

Call your function comparePwd() on click on submit button:

<button onclick="comparePwd()" class="confirm-pwd" type="submit" class="btn  mt-3 submit-btn">Sign-up</button>

after adding this onclick action to button, remove the event listeners both

confirmPwd.addEventListener('keyup' , () => {
 comparePwd()
})
pwd.addEventListener('keyup' , () => {
 comparePwd()
})