best event listener for disabling/enabling a registration button? - forms

Question

I have a registration page for my app. In order to be able to click the button the username and email input fields must have content inside of them. The password input field has a list of parameters: between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number. and the confirm password input field should match the password input field exactly. I used regex to test the password input field and I used the triple equal operator to test if the passwords matched. I'm using oninput events for both of those cases. Where I'm having trouble is finding the best event to trigger the styles associated with my button depending on it being enabled or disabled. I can tie the styling and element attribute to the same functions I'm using for the password stuff but its not exactly full proof.
JS:
function pwValidation() {
let str = document.getElementById('password').value;
let message = document.getElementById('passwordError');
if (!str.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$#!%&*?])[A-Za-z\d#$#!%&*?]{8,30}$/)) {
message.innerText = 'Passwords must be between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number.';
document.getElementById('signUp-btn').style.color = "rgba(255, 255, 255, 0.38)"
document.getElementById('signUp-btn').style.backgroundColor = "rgba(14, 16, 27, 0.38)"
} else {
message.innerText = '';
}
};
function pwMatch() {
if(document.getElementById('password').value !== document.getElementById('password2').value){
document.getElementById('passwordMatch').innerText = 'Passwords must match.';
} else {
document.getElementById('passwordMatch').innerText = '';
document.getElementById('signUp-btn').style.color = "rgb(255, 255, 255)"
document.getElementById('signUp-btn').style.backgroundColor = "rgb(14, 16, 27)"
}
}
HTML:
<form action="/register/createUser" method="POST">
<fieldset>
<input
type="text"
id="text"
name="username"
class="form-control"
placeholder="Username"
oninput="inputDisable()"
/>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Email"
oninput="inputDisable()"
/>
<div class="password-container">
<input
type="password"
id="password"
name="password"
class="form-control"
placeholder="Password"
oninput="pwValidation()"
/>
<div id="passwordError"></div>
<i class="fa-regular fa-eye-slash" id="togglePassword"></i>
</div>
<div class="password-container">
<input
type="password"
id="password2"
name="password2"
class="form-control"
placeholder="Confirm Password"
oninput="pwMatch()"
/>
<div id="passwordMatch"></div>
<i class="fa-regular fa-eye-slash" id="togglePassword2"></i>
</div>
<button type="submit" id="signUp-btn">Sign Up</button>
</fieldset>
</form>
My logic with the functions isn't full proof and you can easily get the button to display. I need some better logic in my functions or a need a better eventlistener but I lack context as I'm new.