登录PHP脚本之前AJAX验证脚本未执行

Question

I'm trying to use AJAX to validate my form, but it isn't working and I have no idea why. It is still executing login_action.php instead of the AJAX validation. I've created a modal login form and want the error message to be displayed inside that popup. Now it is still redirecting to the login_action.php file first.

Script:

<script>

$('document').ready(function(event)
{ 
    event.preventDefault();
     /* validation */
  $("#loginform").validate({
      rules:
   {
   password: {
   required: true,
   },
   email: {
            required: true,
            email: true
            },
    },
       messages:
    {
            password:{
                      required: "please enter your password"
                     },
            email: "please enter your email address",
       },
    submitHandler: submitForm 
       });  
    /* validation */

    /* login submit */
    function submitForm()
    {  
   var data = $("#loginform").serialize();

   $.ajax({

   type : 'POST',
   url  : 'login_action.php',
   data : data,
   beforeSend: function()
   { 
    $("#error").fadeOut();
    $("#submitter").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
   },
   success :  function(response)
      {      
     if(response=="ok"){

      $("#submitter").html('<img src="btn-ajax-loader.gif" /> &nbsp; Signing In ...');
      setTimeout(' window.location.href = "index.php"; ',4000);
     }
     else{

      $("#error").fadeIn(1000, function(){      
    $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
           $("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In');
         });
     }
     }
   });
    return false;
  }
    /* login submit */
});

</script>

Login popup:

<div style="color:black;" id="loginpop" class="modal">

        <form class="loginform animate" action="login_action.php" id="loginform" method="post" onsubmit="return do_login();">
            <div class="maincontainer">
                <span onclick="document.getElementById('loginpop').style.display='none'" class="close" title="Close Modal">&times;</span>
            </div>
            <div class="undermaincontainer">
                <div id="error">
                    <!-- error will be shown here ! -->
                </div>
                <label><b>E-mailadres</b></label>
                <input type="email" placeholder="E-mailadres" name="email" id="emailid" >
                <label><b>Wachtwoord</b></label>
                <input type="password" placeholder="Wachtwoord" name="password" id="passwordid" >
                <input type= "submit" class="loginbtn"  value="Inloggen" name="submitter" id="submitter">
                <label class="signuplink"><a href="registreren.php">Klik hier om een account aan te maken</a></label>


            </div>

        </form>
        </div>

    <script>

    var modal = document.getElementById('loginpop');

    // close popup als de gebruiker naast de popup klikt
    window.onclick = function(event) 
    {
        if (event.target == modal) 
        {
            modal.style.display = "none";
        }
    }
    </script>

PHP login_action

<?php
session_start();
include('sslsecurity.php');
include('file:///var/www/configure.php');



if(isset($_POST['submitter'])) {


    $email = $_POST['email'];
    $password = $_POST['password']; 






    // de gebruiker moet natuurlijk wel iets invullen
    if(!empty($_POST['email'])) {




        // de query in SQL
        $query = $conn->prepare("SELECT role, email, pass FROM WebsiteUsers WHERE email = ? AND pass = SHA1(?) ");


        $query->bindValue('1', $email);
        $query->bindValue('2', $password);
        $query->execute();
        // user id van de user achterhalen



        // resultaat met waarden
        $count = $query->rowCount();
            if($count==1)
            {   
                while($row=$query->fetch(PDO::FETCH_ASSOC))
                {
                    if($row['role'] == 'admin')
                    {
                        $_SESSION['loginright'] = $row['role'];
                    }
                    else
                    {
                        $_SESSION['loginright'] = $row['role'];
                    }
                } 


                // session variable om de user te herkennen aanmaken
                $_SESSION['email'] = $email;

                // terug naar de index pagina    

                echo "ok";

            }
            else
            { 
                echo "fail";
            }



    }
}   

?>  

<?php 
$conn = null;

?>

I've been searching on the internet a while but couldn't find an answer that worked for me. I tried event.preventDefault();, but that doesn't work as well.

Thank you

Answer 1

It doesn't appear that you actually have an even listener on your submit button:

    $("#submit").click(function(event){
        //execute validation and ajax here.
        event.preventDefault();
});