Basic Login Validate With Ajax

-1

Я просто хочу создать простую страницу входа с помощью ajax и php. Есть форма, которая имеет логин и пароль входов и флажок (на данный момент это бесполезно) и кнопку.Basic Login Validate With Ajax

Вот это мой Логин страница:

<?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>

И мой PHP-файл:

<?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; 
?>

Но когда я бегу и попытаться нарушить правила проверки, вместо того, чтобы получать сообщение об ошибке что-то вроде пользователя имя требуется, оно напрямую отправляется в php-файл без входных значений. Поэтому я получаю сообщение об ошибке для $ _POST ["username"] и $ _POST ["password"]. Кроме того, когда я пытаюсь использовать настоящее имя пользователя и пароль, которые существуют в базе данных, такое же scenerio продолжается. Он не может проверить форму, просто запустите часть ajax. Как справиться с этой проблемой? В чем проблема?

источник

2016-04-07 kimdirbilmem

Я думаю, что ваша кнопка входа в систему отправляет форму без вызова функции javascript. Попробуйте установить onclick на #submitButton для отправкиForm(). И не забудьте предотвратить дефолт. –

Я пытаюсь использовать функцию предупреждения в javascript и его запуск на самом деле. Просто не могу подтвердить, но почему я не знаю, к сожалению, – kimdirbilmem

Проблема в том, что ключи в разделе rules должны быть именем поля, а не идентификатором. У ваших полей нет имени. Я считаю, что это также вызовет проблему с сериализацией формы. Попробуйте это вместо этого.

<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>

источник

2016-04-07 22:41:41 Chris

, что я сказал OP делать раньше и никогда не отвечал, поэтому я в итоге удалил. –

Basic Login Validate With Ajax

ответ

Смежные вопросы