Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Rob Harding
Rob Harding
4,128 Points
Posted by Rob Harding
Rob Harding
4,128 Points

So I tried doing it before...

So I tried doing it before, why won't the second message go away?

    var $password = '';

    $('form span').hide();

    $('#password').keypress(function() {
      if($(this).val().length < 8) {
         $(this).next().fadeIn(125);
      } else {
        $(this).next().fadeOut(125);
      }
      $password = (this).val();
    });

    $('#confirm_password').keypress(function() {
      if($(this).val() !== $password) {
        $(this).next().fadeIn(125);
      } else {
        $(this).next().fadeOut(125); 
      }
    });

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Form</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

    <form action="#" method="post">
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
            <span>Enter a password longer than 8 characters</span>
        </p>
        <p>
            <label for="confirm_password">Confirm Password</label>
            <input id="confirm_password" name="confirm_password" type="password">
            <span>Please retype your password</span>
        </p>
        <p>
            <input type="submit" value="SUBMIT">
        </p>
    </form>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px
}
form {
  background: #fff;
  padding: 4em 4em 2em;
  max-width: 400px;
  margin: 100px auto 0;
  box-shadow: 0 0 1em #222;
  border-radius: 5px;
}
p {
  margin: 0 0 3em 0;
  position: relative;
}
label {
  display: block;
  font-size: 1.6em;
  margin: 0 0 .5em;
  color: #333;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none
}
input[type="text"],
input[type="password"] {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1.6em;
  padding: .8em .5em;
  border-radius: 5px;
}
input[type="text"]:focus,
input[type="password"]:focus {
  background: #fff
}
span {
  border-radius: 5px;
  display: block;
  font-size: 1.3em;
  text-align: center;
  position: absolute;
  background: #2F558E;
  left: 105%;
  top: 25px;
  width: 160px;
  padding: 7px 10px;
  color: #fff;
}
span:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}
input[type="submit"] {
  background: #2F558E;
  box-shadow: 0 3px 0 0 #1D3C6A;
  border-radius: 5px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 2em 0 0;
  outline: none;
  padding: .8em 0;
  text-shadow: 0 1px #68B25B;

}
Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points
Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points

can you show your whole code include the form? so i can test it out? And what do you want to achieve?

Rob Harding
Rob Harding
4,128 Points
Rob Harding
Rob Harding
4,128 Points

ill add it now, and im trying to make one message show up if the password is shorter than 8 characters(works), and make on message pop up if the second pass doesn't match the first one(doesn't work)

5 Answers

Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points
Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points

I'll come back to you soon with the solution.

Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points
Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points

Rob Harding im sorry quite busy here, i come with this as soon as possible, try to debug by your self, you can learn a lot of that.

Rob Harding
Rob Harding
4,128 Points
Rob Harding
Rob Harding
4,128 Points

k im really stuck. i have no idea why this isn't working

Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points
Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points

what did you do to by yourself to debug this issue? i've time later on the day to help you, currently im busy with my own job. You can ask someone else on the forum if you in a hurry.

Rob Harding
Rob Harding
4,128 Points
Rob Harding
Rob Harding
4,128 Points

how would ask someone else? i already made this thread