Day 45: More jQuery

My goal today is to finish another jQuery Basic stage. Let’s get to it!

Creating a Password Confirmation Form badge

Let’s take a look at the code like we did last time:

and the last file:

And, now, let’s go through the jQuery code:

OK, these two “var” creates a variable for $(“#password”); and $(“#confirm_password”);

And then we create three functions. The first, isPasswordValid, checks to ensure that the $password is greater than 8 characters in length.

The next, arePasswordsMatching, checks to see whether $password and $confirmPassword are equal.

The last, canSubmit, will allow the submit button to be clicked if both isPasswordValid and arePasswordsMatching are true.

OK, this function first checks if the password is valid by calling the function creating above, and then if it is valid it hides the tooltip hint which is the next child, or if it is invalid it shows the tooltip hint.

Very similar to the last chunk of code. It ensures the passwords matches by running the created function above. If they match it hides the tooltip hint. If they don’t match it shows the tooltip hint.

OK, another new function. This one assigns the property disabled to the id “submit” if the canSubmit function created above is false. If it is false it adds “disabled” to the submit button, making it not work.

Ok, first line is for the password form, which basically uses a focus on the form and keystrokes to run the passwordEvent function. This one also runs the confirmPasswordEvent to ensure whether the passwords match. The next line does similar. At the end of each the keystrokes will also trigger the enableSubmitEvent to ensure whether the form is valid and can be submitted.

Lastly, the last line runs the enableSubmitEvent to call it.

OK, back tomorrow to finish jQuery and move on to JavaScript!