Basic Login Validieren mit Ajax

-1

Ich möchte nur eine einfache Login-Seite mit Ajax und PHP erstellen. Es gibt ein Formular mit Benutzernamen und Passwort Eingaben und Checkbox (für jetzt ist es nutzlos) und Button.Basic Login Validieren mit Ajax

Hier das ist meine Login-Seite:

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

Und meine PHP-Datei:

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

Aber wenn ich laufen und versuchen, Regeln der Validierung zu brechen, anstatt Fehlermeldung etwas wie Benutzer des Erhaltens Name ist erforderlich, es wird direkt an PHP-Datei ohne Eingabewerte gesendet. So bekomme ich eine Fehlermeldung für $ _POST ["Benutzername"] und $ _POST ["Passwort"]. Auch wenn ich versuche, einen echten Benutzernamen und ein Passwort, die in der Datenbank vorhanden sind, zu verwenden, wird dasselbe Szenario fortgesetzt. Es kann das Formular nicht validieren, sondern nur den Ajax-Teil ausführen. Wie kann mit diesem Problem umgehen? Was ist das Problem?

Quelle

2016-04-07 kimdirbilmem

Ich denke, Ihr Login-Button reicht das Formular ein, ohne die JavaScript-Funktion aufzurufen. Versuchen Sie, einen onclick auf Ihr #submitButton zu submitForm() zu setzen. Und vergiss nicht, den Default zu verhindern. –

Ich versuche mit Warnfunktion in Javascript und es läuft tatsächlich. Kann einfach nicht validieren, aber warum weiß ich leider nicht – kimdirbilmem

Das Problem ist, dass die Schlüssel in der rules Abschnitt sollte der Name des Feldes sein, nicht die ID. Ihre Felder haben keinen Namen. Ich glaube, das wird auch ein Problem mit der Serialisierung des Formulars verursachen. Versuchen Sie es stattdessen.

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

Quelle

2016-04-07 22:41:41 Chris

was ich dem OP früher gesagt habe und nie geantwortet habe, also habe ich gelöscht. –

Basic Login Validieren mit Ajax

Antwort

Verwandte Themen