JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="post" style="text-align:center">
<input type="text" placeholder="Username" id="user" name="user"><br/><br/>
<input type="password" placeholder="Password" id="pass" name="pass"><br/><br/>
<input type="password" placeholder="Re-Password" id="CheckPass" name="CheckPass"><br/><br/>
<input type="submit" value="Check availibility" id="check_btn" name="Check Account">
</form>
<form action="CreateAccount.php" method="post" style="text-align:center">
<input type="submit" id="Create" name="Create" id="create_btn" disabled="disabled" value="Create Account" />
</form>
JavaScript
$(document).ready(function() { // Tell page to proceed only once document is fully rendered
$("#check_btn").click(function(e) { // Binds click event from button with ID "check_btn" to this function
e.preventDefault(); // Tells script to STOP the default event of the submit button, prevents form submit
var a_pass = $("#pass").val();
var c_pass = $("#CheckPass").val();
var fail = false;
// same regular expressions as original PHP
var regex_a = /[a-zA-Z]+/;
var regex_b = /[0-9]+/;
// handle the checks
if (a_pass != c_pass) {
alert("Passwords do not match, please try again.");
fail = true;
}
else if (a_pass.length<8) {
alert("Password is too short -- passwords must be at least 8 characters.");
fail = true;
}
else if (!regex_a.test(a_pass)) {
alert("Password must include at least one letter.");
fail = true;
}
else if (!regex_b.test(a_pass)) {
alert("Password must include at least one number.");
fail = true;
}
// then handle the final step
if (fail) {
$("#pass").focus();
// And optionally, the below rows would clear the entered passwords.
$("#pass").val("");
$("#CheckPass").val("");
}
else {
$("#Create").prop("disabled", false);
}
});
});