Can't submit the form after checking the input fields


#1



Hello,
I have created the checks of the input field of the pocketbook project.
when I submit the form the checks work and the messages appears above the right field.


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


When I submit the form again after correcting the error in the form, the form doesn't submit anymore.
the create account button doesn't respond to any clicks anaymore
is this normal or can anyone point out what I'm doing wrong?


var main = function() {
  $('form').submit(function() {
    var firstName = $('#first').val();
    var lastName = $('#last').val();
    var email = $('#email').val();
    var password = $('#password').val();
    
   if(firstName === "") {
    $('.first-name-error').text("Please enter your first name"); 
    }
    
    
     if(lastName === "") {
    $('.last-name-error').text("Please enter your last name"); 
    }

    
     if(email === "") {
    $('.email-error').text("Please enter your email address"); 
    }
    
    
    if(password === "") {
    $('.password-error').text("Please enter a password."); 
    } else if(password.length < 8) {
    $('.password-error').text("Short passwords are easy to guess. Try one with at least 8 characters.");
    }
		return false; 
    
  });
 
}

$(document).ready(main);


#2

@pieterfeenstra,
Could you provide the HTML code you are using.....


#3

Hi Leonard,

<!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>

#4

after a chat with the support team form codecademy the conclusion:
my code works fine but there are no further actions after the submitting the form. and thats why looks like nothing happens.


#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.