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  >
                        <div >
                        <label for="username" >Company Name*</label>
                        <input type="text"  required id="username" name="username"
                            placeholder="Facebook Ltd">
                        </div>
                        <div >
                            <label for="exampleInputEmail1" >Email address*</label>
                            <input type="email"  required id="exampleInputEmail1" aria-describedby="emailHelp"
                                placeholder="[email protected]" name="email">
                            <div id="emailHelp" >We'll never share your email with anyone else.</div>
                        </div>
                        <div >
                            <label for="password" >Password*</label>
                            <input type="password"  required id="password
                                placeholder="Min 8 Characters" name="password">
                        </div>
                        <div >
                            <label for="confirm-password" >Confirm Password*</label>
                            <input type="password"  required id="confirm-password" placeholder="Must Match">
                            <span >Not Matching</span>
                        </div>
                        <button  type="submit" >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.

CodePudding user response：

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 - e.g. the passwords do not match.

So simply change the form to this:

<form action="/register" method="post" onsubmit="return comparePwd()"  >

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'
}
}

CodePudding user response：

Add this to your code

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

and add id to the button to make it match:

<button  type="submit"  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
    }

CodePudding user response：

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

<button onclick="comparePwd()"  type="submit" >Sign-up</button>

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

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