JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<form action="activate_account.php" method="post" id="accountActivation">
<tr>
<td align="right">
<label for="new_password">Password (6-12 chars):</label>
</td>
<td>
<input type="password" name="new_password" id="new_password" />
</td>
</tr>
<tr>
<td align="right">
<label for="new_password2">Again:</label>
</td>
<td>
<input type="password" name="new_password2" id="new_password2" />
</td>
</tr>
<tr>
<td>
<td>
<div class="registrationFormAlert" id="divCheckPasswordMatch">Passwords missmatch</div>
</td>
<td>
<div id="submit">
<button id="buttonActivate" type="submit" disabled="disabled">Activate Account</button>
</div>
</td>
</tr>
</table>
JavaScript
$(document).ready(function() {
$(".registrationFormAlert").hide();
function checkPasswordMatch() {
var password = $("#new_password").val();
var confirmPassword = $("#new_password2").val();
if (password != confirmPassword) {
$("#new_password").css("background", "red");
$("#new_password2").css("background", "red");
$("#buttonActivate").prop("disabled", true);
$(".registrationFormAlert").show();
return false;
} else {
$("#new_password").css("background", "green");
$("#new_password2").css("background", "green");
$("#buttonActivate").prop("disabled", false);
$(".registrationFormAlert").hide();
return true;
}
}
$("input").keydown(function() {
var password = $("#new_password").val();
var confirmPassword = $("#new_password2").val();
if (password.length >= 6 && confirmPassword.length >= 6) {
checkPasswordMatch();
}
});
});