Show hidden div after login error: JQuery and AJAX

Question

I'm using Jquery AJAX to catch login error, but when i submit a bad login i can't see the div loginError

i searched on http://api.jquery.com

i used this example http://hayageek.com/jquery-ajax-form-submit

Here is my js:

$().ready(function() {
    $("#loginForm").validate({
        rules: {
            email: {
                required: true
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 20
            }
        },
        messages: {
            email: {
                required: "Please provide an email"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                maxlength: "Your password must be at most 20 characters long"
            }
        }
    });

    $("#loginForm").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax( {
            url : formURL,
            type: "POST",
            data : postData,
            error: function(jqXHR, textStatus, errorThrown) {
                $("#loginError").show();
            }
        });
        e.preventDefault();
    });

When i remove the e.preventdefault(); i can see briefly this div but my page reload and the div disappear !

And Here is my form:

<form class="cmxform form-signin" id="loginForm" method="POST" action="">
            <fieldset>
                <div class="login-wrap">
                    <h2 class="form-signin-heading"><?php echo lang('login.title')?></h2>
                    <div id="loginError" class="alert alert-warning" hidden="hidden">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <strong>Oh snap!</strong> <?php echo lang('login.error')?>
                    </div>
                    <div class="form-group ">
                        <label class="control-label" for="femail">Email:</label>
                        <input class="form-control" type="email" id="femail" name="email" placeholder="<?php echo lang('login.email') ?>" autofocus required>
                    </div>
                    <div class="form-group ">
                        <label class="control-label" for="fpassword">Password:</label>
                        <input class="form-control" type="password" id="fpassword" name="password" placeholder="<?php echo lang('login.password') ?>" required>
                    </div>
                    <label class="control-label checkbox" for="frememberme">
                        <input type="checkbox" id="frememberme" name="rememberme" value="rememberme"><?php echo lang('login.rememberme')?>
                        <span class="pull-right"> <a href="forget"><?php echo lang('login.forget') ?></a></span>
                    </label>
                    <button class="btn btn-lg btn-block btn-login" type="submit"><?php echo lang('login.login')?></button>
                    <a href="register"><button type="button" class="btn btn-lg btn-block btn-register"><?php echo lang('login.register')?></button></a>
                    <div class="login-social-link">
                        <p><?php echo lang('login.joinus') ?></p>
                        <a href="index" class="facebook">
                        <i class="icon-facebook"></i>Facebook</a>
                        <a href="index" class="twitter">
                        <i class="icon-twitter"></i>Twitter</a>
                    </div>
                </div>
            </fieldset>
        </form>

maybe it come from my CodeIgniter code.

Thank's in advance !

Answer 1

try something like this

    $("#loginForm").submit(function(e)
    {
        e.preventDefault();
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax( {
            url : formURL,
            type: "POST",
            data : postData,
            error: function(jqXHR, textStatus, errorThrown) {
                $("#loginError").show();
            }
        });
    });

Answer 2

Try this:

$("#loginForm").submit(function (e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function (response) {
            if (response) {
                //do stuff if login is correct
            } else {
                $("#loginError").show();
            }

        },
        error: function (jqXHR, textStatus, errorThrown) {
            //$("#loginError").show();
        }
    });
    e.preventDefault();
});  

Note: Get the response from server side after database operation. and make changes in IF/ELSE condition as per your requirement