Показать скрытые DIV после ошибки входа: JQuery и AJAX

Question

Я использую Jquery AJAX, чтобы поймать ошибку входа в систему, но когда я подать плохой логин я не могу видеть Див loginError

я искал на http://api.jquery.com

я использовал этот пример http://hayageek.com/jquery-ajax-form-submit

Вот мои ЯШ:

$().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(); 
    }); 

Когда я удалить e.preventdef Олт(); я могу коротко увидеть этот div, но моя страница перезагрузится и div исчезнет!

И вот моя форма:

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

может быть родом из моего CodeIgniter кода.

Спасибо заранее!

Answer 1

попробовать что-то вроде этого

$("#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

Попробуйте это:

$("#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(); 
}); 

Примечание: Получить ответ из стороны сервера после операции с базой данных. и сделать изменений в состоянии IF/ELSE согласно вашему требованию