Basic Login Validate With Ajax

Question

I just want to create a simple login page with using ajax and php. There are a form which has username and password inputs and checkbox ( for now it is useless ) and button.

Here this is my login page:

    <?php
    if(isset($_SESSION['user_session']))
    {
    header("Location: home.php");
    exit;
    }
    ?>

<!DOCTYPE html>
<html>
  <head>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
    <link rel="stylesheet" href="CSS/login.css">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <title>Login</title>

    </head>
    <body>
    <div class="main">
      <img class="backImage" src="img/typewriter.jpg" />
      <div id="login">
          <div class="formClass">
              <form class="loginForm" method="post"> //login form to validate
                  <div class="form-group">
                      <label for="userName">User Name</label>
                      <input type="text" class="form-control" id="username" placeholder="User Name">
                  </div>
                  <div class="form-group">
                      <label for="password">Password</label>
                      <input class="form-control" type="password" id="password" placeholder="Password">
                  </div>
                  <div class="checkbox">
                      <label>
                          <input type="checkbox"> Remember Me
                      </label>
                  </div>
                  <button type="submit" class="btn btn-primary" id="submitButton">Login</button>
              </form>
          </div>
      </div>
    </div>
    <script>
            $(document).ready(function () {
            $('.loginForm').validate({
        rules: {
            username: {
                required: true,
                minlength: 5,
                maxlength: 18
            },
            password: {
                required: true,
                minlength: 5,
                maxlength: 14
            }
        },
        submitHandler: submitForm
    });
    function submitForm(){
                var strAjax = $('.loginForm').serialize(); // get the input values
                $.ajax({
                    type: 'POST',
                    url: 'logAjax.php',
                    data: strAjax,
                    cache: false,
                    success: function(data) {
            alert(data);
                        if(data == true) {
                            window.location.href = "home.php"; // if response is true, then user can go home page
                        }
                        else {
              alert("false"); // this is just for control purpose
                        }
                    }
                });
                return false;
                }
        });
        </script>
  </body>
</html>

And my php file:

<?php  //this is also too simple. just connect the database, control input values and response
    include_once 'dbcon.php';

    $username = mysqli_real_escape_string($conn, $_POST["username"]);
    $password = mysqli_real_escape_string($conn, $_POST["password"]);

    $sql = "SELECT * FROM tbl_user WHERE userName = '$username' AND password = '$password'";

    $result = mysqli_query($conn, $sql);
    $count = mysqli_num_rows($result);
    $row = mysqli_fetch_array($result);

    if($count == 1){
        $_SESSION['user_session'] = $row['userName'];
        echo TRUE;
    }
    else {
        echo FALSE;
    }
    exit;
?>

But when I run and try to break rules of validation, instead of getting error message something like user name is required, it directly send to php file without input values. So I get an error message for $_POST["username"] and $_POST["password"]. Also when I try real username and password that exist in database, same scenerio continues. It can not validate the form just run the ajax part. How can handle this problem? What is the problem?

I think your login button is submitting the form without calling the javascript function. Try to put an onclick on your #submitButton to submitForm(). And don't forget to prevent default. — João Paulo de Lima, Apr 07 '16 at 21:45
I try with alert function in javascript and its run actually. Just can not validate but why I dont know unfortunately — kimdirbilmem, Apr 07 '16 at 21:47

score 1 · Accepted Answer · answered Apr 07 '16 at 22:41

The problem is that the keys in the rules section should be the name of the field, not the ID. Your fields don't have a name. I believe this will also cause a problem with the serialization of the form. Try this instead.

 <div class="form-group">
      <label for="userName">User Name</label>
      <input type="text" class="form-control" id="username" name="username" placeholder="User Name">
 </div>
 <div class="form-group">
     <label for="password">Password</label>
     <input class="form-control" type="password" id="password" name="password" placeholder="Password">
 </div>

which is what I told the OP to do earlier and never responded, so I ended up deleting. — Funk Forty Niner, Apr 07 '16 at 22:42

Basic Login Validate With Ajax

1 Answers1