Newbie Login Form Question

Newbie Login Form Question

Hi Guys,

I have just copied a jQuery script and I am trying to understand and edit it. In part it works but I am unable to change a few things and would like help. This is my first JQuery attempt so go easy :-)

The basics is a username/password login form. The jQuery checks to see if the input is not blank and if so displays an error message inside the input elements in red.

If non empty then a php script is called to check a database for the username/password. The php sets a variable depending on wether it is successful, username has failed or password has failed.

The jQuery checks the returned value of the php script and if successful redirects to a different page. If not I would like to display an error message in the input text area as the blank checking did and write an error message but I have been unsuccessful. My code listed just appends a message to the end of the form.

I tried to find the element and append to it but couldn't get it to work. ANy help would be appreciated.

  1.      <div id="login-form">
          <form action="check.php" id="loginForm" method="post">
           <p>You can either use your username or your email address to login. If you have not been provided with a username and/or a password then please register first.</p>
           <h4>Username<span class="line"></span></h4>
           <label for="loginName" data-rel="Username" class="display-none">Username</label>
           <div>
            <input type="text" name="loginName" id="loginName" value="" class="requiredField " onFocus="if(this.value=='') this.value='';" onBlur="if(this.value=='') this.value='';" />
           </div>
           <h4>Password<span class="line"></span></h4>
           <label for="loginPassword" data-rel="Password" class="display-none">Password</label>
           <div>
            <input type="password" name="loginPassword" id="loginPassword" value="" class="requiredField " onFocus="if(this.value=='') this.value='';" onBlur="if(this.value=='') this.value='';" />
           </div>
           <li class="screenReader display-none">
              <label for="widget-checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label>
              <input type="text" name="widget-checking" id="widget-checking" class="screenReader" value>
           </li>
           <div class="buttons">
            <input type="hidden" name="widget-submitted" id="widget-submitted" value="true">
            <input type="submit" id="login-submit" value="LOGIN">
           </div>
          </form>
         </div>
        </div>
The jQuery is

  1. jQuery(document).ready(function() {
     
     jQuery('#loginForm').submit(function() {
      jQuery('#loginForm .error-message').remove();
      var hasError = false;
      jQuery('#loginForm .requiredField').each(function() {
                var labelText = jQuery(this).parent().prev('label').attr('data-rel');
       if(jQuery.trim(jQuery(this).val()) == '') {
                 jQuery(this).parent().append('<span class="error-message">Please enter your '+labelText+'</span>').find('.error-message').width(jQuery(this).parent().width()).height(jQuery(this).parent().height()-9).hover(function(e) { jQuery(this).fadeOut(300); });
                 jQuery(this).addClass('inputError');
                 hasError = true;
                }
      });
      
      if(!hasError) {
       var formInput = jQuery(this).serialize();
       jQuery.post(jQuery(this).attr('action'), formInput, function(data){
        jQuery('#loginForm').slideDown('fast', function() {
         jQuery('#loginForm .wait').slideDown("fast");
          var test_data = JSON.parse(data);
          if (test_data.test_success == "login ok") {
           window.location.replace("http://localhost/index.php");
          } else if (test_data.test_success == "login bad - password wrong"){   
           jQuery(this).parent().append('<span class="message-box no-icon red"><strong>Password Wrong!</strong></span>');
          } else if (test_data.test_success == "login bad - username wrong"){   
           jQuery(this).parent().append('<span class="message-box no-icon red"><strong>Unkown Username!</strong></span>');
          } else {   
           jQuery(this).parent().append('<span class="message-box no-icon red"><strong>Login Failed!</strong></span>');
          }
        });
       });
  3.   }
      return false;
     });
    });

The password checking script is

  1. <?php
  3. require_once('C:\Program Files\wamp\scripts\dbConfig.php');
    session_start();
  5. $arr = array("test_success" => "login bad - username wrong");
  7. $username = $_POST['loginName'];
    $pass = $_POST['loginPassword'];
  9. $sql = "SELECT password, salt, username, email, first_name, access FROM tbl_people WHERE username = '$username' OR email = '$username'";
    $result = $conn->query($sql);
  11. $count=$result->num_rows;
  13. if ($count==1) {
     $row = $result->fetch_assoc();
     $hashed_pass = crypt($pass, $Blowfish_Pre . $row['salt'] . $Blowfish_End);
  15.  if ($hashed_pass == $row['password']) {
      $username = $row['username'];
      $_SESSION['user'] = $username;
      $_SESSION['first_name'] = $row['first_name'];
      $_SESSION['access'] = $row['access'];
      $_SESSION['email'] = $row['email'];
      $ip = $_SERVER['REMOTE_ADDR'];
      $sql = "UPDATE tbl_people SET last_IP='$ip' WHERE username='$username' LIMIT 1";
            $result = $conn->query($sql);
      $arr = array("test_success" => "login ok");
     } else {
      $arr = array("test_success" => "login bad - password wrong");
     }
    } else {
      $arr = array("test_success" => "login bad - username wrong");
    }
  16. echo json_encode($arr);
  17. ?>

any help would be highly appreciated.