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

Posted by davidreyes2
davidreyes2
3,422 Points

How to have it not Submit?

Ok, my question starts at how do I not let it submit if there is no username to the form? I got this code from the Jquery basics, but with the password and confirm password code. I myself added the username code, but I can't figure out how to not let it submit if there is no username at all...... Thanks!!!

<!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">
            <span>Enter your Username</span>
        </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 confirm your password</span>
        </p>
        <p>
            <input type="submit" value="SUBMIT" id="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(1).js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

ody {
  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;

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

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

function isUsername() {
  return $userName.val().length > 0;
}

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

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

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

function usernameEvent() {
  //Find out if Username is there  
  if (isUsername()) {
    //Hide hint if valid
  $userName.next().hide();
  } else {
    //else show hint
  $userName.next().show();
  }
}

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

function confirmPasswordEvent() {
  //Find out if password and confirmation match
  if(arePasswordsMatching()) {
    //Hide hint if match
    $confirmPassword.next().hide();
  } else {
    //else show hint 
    $confirmPassword.next().show();
  }
}

function enableSubmitEvent() {
  $("#submit").prop("disabled", !canSubmit());
}

//When event happens on username input
$userName.focus(usernameEvent).keyup(usernameEvent).keyup(passwordEvent).keyup(enableSubmitEvent);

//When event happens on password input
$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

//When event happens on confirmation input
$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

enableSubmitEvent();
davidreyes2
davidreyes2
3,422 Points

Thanks! And thanks for letting me know about using a backend for validation. I was just excited to actually figure out how to add a message for username! Thanks for your help!

1 Answer

Samuel Webb
Samuel Webb
25,370 Points

In your enableSubmitEvent() function you're using the canSubmit() function to verify that the passwords are matching and valid. In which case you enable the button. So in the canSubmit() function you need to add one more check for the length of the username. Luckily you already have that function ready to use isUsername(). So I just changed canSubmit() to look like this:

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

Hope this helps you out.

Cheers, Sam

Samuel Webb
Samuel Webb
25,370 Points

FYI, JavaScript validation isn't the best way to go. If someone has JavaScript disabled in their browser, none of your validation will work. It's best to make sure your validation is backed up using a backend language like Python, Ruby or PHP.