Überprüfung und Einreichung Form über Ajax in Bootstrap-modal

Question

Ich habe ein Login-Formular in Modal-Fenstern des Bootstrap

<form method="post" id="loginForm" action="index.php"> 
    <label for="email">Email:</label> 
    <input class="form-control" type="text" name="email" value="" id="emailLogin"/><br/> 

    <label for="password">Password:</label> 
    <input class="form-control" type="password" name="password" value="" id="passwordLogin"/><br/> 
    <div id="loginAlert" class="alert alert-danger" role="alert">Email or password incorrect</div> <!-- Hidden by default --> 

    <button type="submit" name="login" class="btn btn-primary" id="loginButton">Login</button> 
    <script src="checkLoginForm.js"></script></form> 

Ich mag würde diese Form überprüfen (wenn E-Mail und das Passwort korrekt ist) vor dem Absenden. Wenn die Funktion, die die E-Mail und das Passwort überprüft, 1 zurückgibt, ist etwas nicht korrekt. Das Formular sollte in diesem Fall nicht gesendet werden und es sollte nur die Warnung sichtbar machen. Wenn alles korrekt ist, sollte es einreichen.

Die Sache ist: Ich kann verhindern, dass das Formular übermittelt, wenn die E-Mail und das Passwort falsch sind, aber ich kann es nicht einreichen, wenn sie korrekt sind. Hier ist der Code von checkLoginForm.js

$(document).ready(function() { 
    $("#loginForm").submit(function(event) { 
     event.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      url: 'include/ajax.php?action=checkLogin', 
      data: { 
       email: $("#emailLogin").val(), 
       password: $("#passwordLogin").val(), 
      }, 
      success: function(result) { 
       console.log(result); 
       if(result == 0) { 

       } else { 
        $("#loginAlert").css({"display": "block"}); 
       } 
      } 
     }); 
    }); 
}); 

Ich habe keine Ahnung, was zu tun ist, wenn das Ergebnis == 0. Wenn ich $("loginForm").submit(); tun, die nicht die Form nicht einreichen (sonst Teil funktioniert).

Vielen Dank für Ihre Antworten.

Answer 1

Ich würde Ihnen raten, eine einfache $.post zu verwenden, es ist eine Kurzform der Verwendung von $.ajax für POST-Anfragen. Überprüfe einfach, ob die angegebenen Werte in deiner PHP-Datei korrekt sind, ob sie korrekt sind und die Daten zurückgeben oder true zurückgeben oder den Benutzer zu einer anderen Seite umleiten, sonst gebe false zurück.

$(document).ready(function() { 
    $("#loginButton").on('click', function (e){ 
     e.preventDefault(); 
     var email = $("#emailLogin").val(); 
     var passwd = $("#passwordLogin").val(); 
     $.post('include/ajax.php?action=checkLogin', {email: email, password: passwd}, function (data) { 
      var res = $.parseJSON(data); 
      if (res.result == true) { 
       //you can redirect the or display a message to the user. 
       //redirect the user to another page 
       //$("#loginAlert").css({"display": "block"}).html("login successful"); 
      }else { 
       $("#loginAlert").css({"display": "block"}); 
      } 
     }); 
    }); 
    }); 

dann in Ihre PHP-Datei

if (isset($_GET['action']) && $_GET['action'] == 'checkLogin') { 
    $passwd = trim(filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING)); 
    $email = trim(filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL)); 
    //validate inputs here 
    //get data from db 
    //then compare values 
    //if values match return true 
    //$db_mail and $db_passwd are from the db. 
    if ($email == $db_mail && $passwd == $db_passwd) { 
     //if the provided information is correct 
     //process it here, login the user. 
     //redirect if necessary. 
     // or return results to JS 
     echo json_encode(['result' => true]); 
    } else { 
     //if the information is wrong return false to JS 
     //and alert the user 
     echo json_encode(['result' => false]); 
    } 
}