Set custom Bootstrap invalid/valid messages

Question

I have made a login/register form using react.js/bootstrap and in the register form i have 4 inputs. One for username, one for email, and 2 for password (1 password and 1 for confirmation purposes), i want to show a message if the 2 passwords dont match, sth like passwords dont match.

I tried adding the invalid-feedback boostrap class after checking if the 2 password inputs but it doesnt work as expected Here is the code i am using :

   function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    passwordChecker();


    if (form.checkValidity()) {
        handleLoginClick();
        reset();
        console.log("Form submitted successfully");
    } else {
        form.classList.add('was-validated');
    }
  }
function passwordChecker(){
    const confirmPasswordField = document.querySelector("#invalidpassword1");
    if (isRegistering && password !== checkPassword) {
        form.classList.add('was-validated');
        confirmPasswordField.classList.add("invalid-feedback"); 
        console.log("passwords dont match")
    } else {
        confirmPasswordField.classList.remove("invalid-feedback");
        console.log("passwords  match")
    }
  }


<div className="form-floating mb-3">
                    <input 
                      type="password" 
                      className="form-control" 
                      id="registerPassword" 
                      placeholder="Enter your password"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required 
                    />
                    <label htmlFor="registerPassword">Password</label>
                    <div className='invalid-feedback' id='invalidpassword2'>Please fill out this field</div>
                 
  <div className="form-floating mb-3">
                    <input 
                      type="password" 
                      className="form-control" 
                      id="confirmPassword" 
                      placeholder="Confirm your password"
                      value={checkPassword}
                      onChange={(e) => setCheckPassword(e.target.value)}
                      required
                    />
                    <label htmlFor="confirmPassword">Confirm Password</label>
                    <div id='invalidpassword1'>Passwords do not match</div> 
                  </div>

new code I tried

<div id='invalidpassword1' className='invalid-feedback'>{checkPassword==='' ? 'Please fill out this field' : 'Passwords do not match'}</div>

now the right message pops up but still the equation doesnt work and when the passwords don't match it shows up correct

Answer 1

You need to manually set input field validity with setCustomValidity()

So, get the input field and set its validity to something (for example, a space to avoid browser displaying the message, and instead only showing BS feedback):

if (isRegistering && password !== checkPassword) {
    form.classList.add('was-validated');
    confirmPasswordField.classList.add("invalid-feedback"); 
    console.log("passwords dont match")

    const input = document.querySelector('#confirmPassword');
    input.setCustomValidity(" ");                
    input.reportValidity();