Pocketbook jQuery Not Working. Not Receiving Intended Errors


#1



https://www.codecademy.com/en/courses/jquery-ext/projects/jquery-prj_pocketbook


I do not receive any of the error messages that I coded below when I click the "create account" button. Instead, the page just refreshes and seems to take accept my empty fields. Can someone tell me what I have to add/change so that I receive my error messages when things are not filled out all the way? Thanks.


var main = function() {
  $('form').submit(function() {
    var firstName = $('#first').val();
    if(firstName === "") {
      ('#first-name-error').append('Please enter your first name.');
    };
		
    var lastName = $('#last').val();  
    if(lastName ===""){
      ('#last-name-error').append('Please enter your last name.');
    };
    
    var email = $('#email').val();
    if(email === ""){
      ('#email-error').append('Please enter your email address.');
    };
    
    var password = $('#email').val();   
    if(password === ""){
      ('#password-error').append('Please enter a password.');
    }
    
    if(password.length <= 8){
      ('#password-error').append('Short passwords are easy to guess. Try one with at least 8 characters.');
    };
    
    if(email === "mets.man32@gmail.com"){
      ('#email-error').append('This email is already taken.');
    };
    return false;
  });
};

$(document).ready(main);


*********HTML**********
<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/2/pocketbook/logo.svg" width="50">
      </div>
    </div>

    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-7">
            <h1>Join Pocketbook</h1>
            <form role="form">
              <div class="form-group">
                <label for="first">First name</label>
                <p class="first-name-error"></p>
                <input type="text" class="form-control" id="first">
              </div>
              <div class="form-group">
                <label for="last">Last name</label>
                <p class="last-name-error"></p>
                <input type="text" class="form-control" id="last">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <p class="email-error"></p>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="password" class="password-label">Password</label> 
                <p class="password-error"></p>
                <input type="password" class="form-control" id="password">
              </div>
              <button type="submit" class="btn">Create account</button>
            </form>        
          </div>
        </div>
      </div>
    </div>


    <div class="footer">
      <div class="container">
        <ul>
          <li>Contact</li>
          <li>Help Center</li>
          <li>About</li>
        </ul>
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>


#2

@tamba32,
Could you provide the HTML-code ??


#3

Sure. I added it above so the formatting would be preserved.


#5

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/2/pocketbook/logo.svg" width="50">
      </div>
    </div>

    <div class="main">    
  <div class="container">
        <div class="row">
          <div class="col-md-7">
            <h1>Join Pocketbook</h1>
            <form role="form">
              <div class="form-group">
                <label for="first">First name</label>
                <p class="first-name-error"></p>
                <input type="text" class="form-control" id="first">
              </div>
              <div class="form-group">
                <label for="last">Last name</label>
                <p class="last-name-error"></p>
                <input type="text" class="form-control" id="last">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <p class="email-error"></p>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="password" class="password-label">Password</label> 
                <p class="password-error"></p>
                <input type="password" class="form-control" id="password">
              </div>
              <button type="submit" class="btn">Create account</button>
            </form>        
          </div>
        </div>
      </div>
    </div>


    <div class="footer">
      <div class="container">
        <ul>
          <li>Contact</li>
          <li>Help Center</li>
          <li>About</li>
        </ul>
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

#7

Codecademy is not responding properly. I pasted the full code but only a segment of it is showing up.

EDIT: now it seems to be working. Look at my previous comment to see the full code.


#8

@tamba32,
Give me some time.... 1-day


#10

you should change : #last-name-error to .last-name-error as it is class attribute


#11

What I did and it seems to work is use .text() instead of .append().
Also I believe you need to use the # when targeting an HTML element id tag, so you do that when creating your variables, like you did. BUT when you are doing your IF THEN statements you are targeting a class and so you use the dot instead of #. (ex. $('.class')) So instead of:

You should change the if part to:

Also in the code above you have your password variable being the email input. That will confuse things.

I'm not an expert as I am only going through this course myself but I think that should fix it. Mine is working like that at the very least. I tried your .append() and it works exactly the same. Cool.


#12