Disable submit button when password not match and enable when matched in bootstrap modal

Question

I have a bootstrap modal form for sign up. I want my submit button to be disabled before my password and re-type password are matched. Matched meaning it has to be some input and not empty.

The button should be enabled when matched and disabled again when both fields unmatched again.

I have tried almost all solutions on google and am still stuck for two days.

Here is my form HTML:

<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>

<div class="form-group">
<a href="signup.php" style="text-decoration: none;"><button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button></a>
</div>

Here is my script:

    if (document.getElementById('signupModalPassword').value ==
    document.getElementById('signupModalPwCheck').value) {
        document.getElementById('signupbtn').disabled = false;
    } else {
        document.getElementById('signupbtn').disabled = true;
    }

    if(document.getElementById('signupModalPassword').value == 0) {
       document.getElementById('signupbtn').disabled = true;
    } else {

        document.getElementById("signupbtn").disabled = false;
}

Please forgive my messy code as I'm very new to coding.

I'll be so grateful if you could help.

Answer 1

example of code:

// validate on first render
check();

function check() {
  const signupModalPassword = document.getElementById('signupModalPassword');
  const signupModalPwCheck = document.getElementById('signupModalPwCheck');

  if (signupModalPassword.value && signupModalPwCheck.value
      && signupModalPassword.value === signupModalPwCheck.value) {
    document.getElementById('signupbtn').disabled = false;
  }
  else {
    document.getElementById('signupbtn').disabled = true;
  }
 }
    

<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>

<div class="form-group">
<button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button>
</div>