title: Ajax & PHP login form, issues with validation. Multiple troubles
body: <p>I'm trying to turn my login form into a drop down using ajax and jquery.  So far I've got everything working except the ajax and error validation.</p>
  
  <p>Currently the main issue I have is when a field is not entered, password for example.  The login box displays "this field is required" which is great, if I then click on submit again the input field disappears and the message remains.  I can't continue with login unless I refresh the page.</p>
  
  <p>The other main issue is getting the error message from the php.  If I input the wrong password, the message doesn't get displayed.  The form submits, goes away and that's it.  When I select login again I can see the error message that should have been displayed previously.</p>
  
  <p>On a plus side : A correct login combination works perfectly.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>Both PHP and Function are pasted below.</p>
  
  <pre><code>function validLogin(){
  
  $('.error').hide();
  var username = $('#username').val();
  if(username == ""){
      $('label#usernameError').show();
      $('input#username').focus();
      return false;
  }
  
  $('.error').hide();
  var password = $('#password').val();
  if(password == ""){
      $('label#passwordError').show();
      $('input#password').focus();
      return false;
  }
  
  var params = "username="+username+"&amp;password="+password;
  var url = "loginProcessAjax.php";
  
  $("#status").show();
  $("#status").fadeIn(400).html('&lt;img src="image/loading.gif" /&gt;');
  
  
  $.ajax({
      type: 'POST',
      url: url,
      dataType: 'html',
      data: params,
      beforeSend: function() {
          document.getElementById("status").innerHTML= 'checking...'  ;
      },
      complete: function() {
  
      },
      success: function(html) {
          $("#status").hide();
          document.getElementById("status").innerHTML= html;
          if(html=="success"){
  
              window.location = "index.php"
  
          }
  
      }
  });
  }
  
  
  &lt;?php
  //check fields are filled in
  if(empty($_POST) === false){
  
  $username = trim($_POST['username']);
  $password = trim($_POST['password']);
  
  //validate fields
  if(empty($username) === true || empty($password) === true){
      $errors[] = 'Your username and password are needed.';
  }else if($users-&gt;userExists($username) === false){
      $errors[] = 'That username does not exist';
  }else if($users-&gt;emailActivated($username) === false){
      $errors[] = 'You need to activate the account, please check your email.';
  }else{
  
      //start login
      $login = $users-&gt;login($username, $password);
      if($login === false){
          $errors[] = 'That username or password is invalid';
  
          if(empty($errors) === false){
              echo '&lt;p&gt;' .implode('&lt;/p&lt;p&gt;', $errors).'&lt;/p&gt;';
          }
  
      }else{
          //destroy old session and create new - prevents session fixation attacks
          session_regenerate_id(true);
          //all details are correct - the method returns the id to be sotred as a session
          $_SESSION['id'] = $login;
          //send user to their home page
          echo "success";
          header('Location: userHome.php');
          exit();
      }
  }
  }
  </code></pre>
  
  <p>EDIT:  Just checked again, now if I leave any of the fields blank or if they are incorrect no error is displayed.  The second scenario above is constant unless correct details are provided.</p>