Getting a syntax error, feeling frustrated. Second pair of eyes, please? [SOLVED]

Question

Clearly I'm missing something here, but I can't seem to see it.

js/app.js

//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 isUsernamePresent() {
  if $username.val().length > 0;
  return true;
};

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

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

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

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());
};


function usernameEvent() {
  if(isUsernamePresent()) {
    $username.next().hide();
  } else {
    $username.next().show();
  } 
};

//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);

$username.focus(usernameEvent).keyup(usernameEvent).keyup(enableSubmitEvent);

enableSubmitEvent();

index.html

<!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>Please enter 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="//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>

Answer 1 · 2015-01-30T07:39:29Z

January 30, 2015 7:39am

The javascript console should hint as to where the syntax error is, should supply a line number.

But anyway, I think it could be you "isUsernamePresent" function. No brackets around the 'if' statement:

function isUsernamePresent() {
  if ($username.val().length > 0) {
    return true;
  }
}

but really it is simpler to do it like the other functions in this section:

function isUsernamePresent() {
  return $username.val().length > 0
}

Welcome to the Treehouse Community

Looking to learn something new?

Joel Smith

Joel Smith

Getting a syntax error, feeling frustrated. Second pair of eyes, please? [SOLVED]

1 Answer

James Alker

James Alker