Day 6: Password Forms & Tooltips | Tiffany R. White Blog

Day 6: Password Forms & Tooltips

Reading time: 1 min

Day_6_badge

Here we just iterated on what we learned previously with:

.prop() .hide() .show() .val()

We learned two new methods,

.focus()

and

.keyup()

in relation to making it so the tooltips showed up when we clicked in the form’s password box, the tool tip being “password needs to be greater than 8 characters”. Once the 8 characters were put in, the tool tip disappeared.

The code looked something like this:

//Problem: Hints are shown even when form is valid
//Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");

//Hide hints
$("form span").hide();

function isPasswordValid() {
 return $password.val().length < 8;
}

function arePasswordsMatching() {
 return $password.val() === $confirmPassword.val();
}

function canSubmit() {
 return isPasswordValid() && arePasswordsMatching() && isUsernamePresent();
}

function passwordEvent(){
 //Find out if password is valid
 if(isPasswordValid()) {
 //Hide hint if valid
 $password.next().hide();
 } else {
 //else show hint
 $password.next().show();
 }
}



//Problem: Hints are shown even when form is valid
//Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");

//Hide hints
$("form span").hide();

function isPasswordValid() {
 return $password.val().length < 8;
}

function arePasswordsMatching() {
 return $password.val() === $confirmPassword.val();
}

function canSubmit() {
 return isPasswordValid() && arePasswordsMatching() && isUsernamePresent();
}

function passwordEvent(){
 //Find out if password is valid
 if(isPasswordValid()) {
 //Hide hint if valid
 $password.next().hide();
 } else {
 //else show hint
 $password.next().show();
 }
}




We practiced DRY programming by wrapping our resued methods, variables, etc in functions.

Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.

Newsletter