I am currently working on a website that requires user registration. On the register form, I have 4 text fields, and a "register" button. I have a username field, email field, password field, and a confirm password field. There are several tests that are executed whenever a user inputs information. For example, there is a username availability checker, an email validator, a password match checker, and a password strength checker. In order for a user to be able to register, I want all of these tests to be passed. If at least one of these tests fail, for example the user's passwords don't match, I don't want the register button to be clickable(and I'd also like the register button to be gray'd out while it's unclickable.) Here's my attempt:
First, I set 4 variables. Each variable represents a test that was undergone.
var test1 = 0;
var test2 = 0;
var test3 = 0;
var test4 = 0;
By default, all tests are set to '0' which would represent a failed test. So by default, the register button should be unclickable and gray'd out.
Then, I edited the tests themselves. If the test was passed, I would set the corresponding test variable to '1'. For example, here's my username test:
if(msg == 'OK') //if the username is available
{
$("#username").removeClass("red");
$("#username").addClass("green");
msgbox.html('<img src="available.png" align="absmiddle">');
test1 = 1; //sets the first test variable as passed
}
else //if the username is not available
{
$("#username").removeClass("green");
$("#username").addClass("red");
msgbox.html(msg);
test1 = 0; //sets the first test variable as failed
}
There is a lot more code used to make the username availability checker work, however I don't feel that the rest of the code is necessary to the question I have.
I then repeat that same idea throughout the other 3 tests. The email validator, the password strength checker, and the password match checker. If all 4 tests were passed(if all 4 text fields were filled out correctly) then all test variables are set to '1'.
Next, I set up a function that checks the value of the test variables to see whether or not they are passed.
function checkButton(){
if (test1 == 1 && test2 == 1 && test3 == 1 && test4 == 1){ //checks if all 4 tests are passed
$("#register").prop('disabled', false); //if they are, make the register button clickable
} else {
$("#register").prop('disabled', true); //if not, make the register button NOT clickable
$("#register").style.backgroundColor = "#A09B9B"; //as well as change the button background color to gray.
}
}
After that, I call the function every time a key is pressed in any of the fields. I do this by using the 'onkeyup' attribute.
<input type="text" name="username" onkeypress="return inputLimiter(event,'username'); checkButton()" id="username" maxlength="20" placeholder="Enter your desired username"/><br>
<input type="text" name="email" id="email" onkeyup="checkButton()" placeholder="Enter your E-Mail address here"/><br>
<input type="password" class="password" id="password" name="password" onkeyup="checkStrength(); checkPasswordMatch(); checkButton()" placeholder="Enter a password with more than 5 characters"/><br>
<input type="password" id="password2" onkeyup="checkPasswordMatch(); checkButton()" name="password2" placeholder="Enter the same password you entered above"/><br>
If seeing my register form in action would help, visit it here: register form
