2015-11-03 96 views
0

我一直在努力修復我的代碼幾天,沒有運氣。我正在嘗試使用AJAX驗證我的登錄表單。 jQuery的AJAX不斷記錄與PHP Ajax表單驗證不通過json

there was a problem checking the fields

這是我的jQuery腳本這是相同的頁面登錄表單上的控制檯(包括在頭Jquery的):

var data = {}; 
    $(document).ready(function() { 
     $('input[type="submit"]').on('click', function() { 
      resetErrors(); 
      var url = 'login.php'; 
      $.each($('form input, form select'), function(i, v) { 
       if (v.type !== 'submit') { 
        data[v.name] = v.value; 
       } 
      }); //end each 
      $.ajax({ 
       dataType: 'json', 
       type: 'POST', 
       url: url, 
       data: data, 
       success: function(resp) { 
        if (resp === true) { 
         //successful validation 
          $('form').submit(); 
         return false; 
        } else { 
         $.each(resp, function(i, v) { 
       console.log(i + " => " + v); // view in console for error messages 
          var msg = '<label class="error" for="'+i+'">'+v+'</label>'; 
          $('input[name="' + i + '"], select[name="' + i + '"]').addClass('inputTxtError').after(msg); 
         }); 
         var keys = Object.keys(resp); 
         $('input[name="'+keys[0]+'"]').focus(); 
        } 
        return false; 
       }, 
       error: function() { 
        console.log('there was a problem checking the fields'); 
       } 
      }); 
      return false; 
     }); 
    }); 
    function resetErrors() { 
     $('form input, form select').removeClass('inputTxtError'); 
     $('label.error').remove(); 
    } 

我的表格:

 <label>Username *</label> 
     <input name="user" class="form-control" placeholder="Username" required autofocus><br> 
     <label>Password *</label><br> 
     <input type="password" name="password" class="form-control" placeholder="Password" required> 
     <input type="submit" name="submit" value="login" /> 

我的PHP(刪除代碼不相關):

else{ 
     $_SESSION['errors']['user'] = "login failed"; 
     echo "Login failed: (" . $stmt->errno .")" . $stmt->error; 
    } 
$stmt->close(); 


     if(count($_SESSION['errors']) > 0){ 
      if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
       header('Content-type: application/json'); 
       echo json_encode($_SESSION['errors']); 
       exit; 
      } 
     } 

經過我自己的一些研究,我相信我的jquery有問題,但我一直無法找到答案。

預先感謝您! :)

+0

在你的AJAX調用,你應該改變錯誤回調接受文檔中描述的參數。這樣你至少可以知道發生了什麼類型的錯誤。 http://api.jquery.com/jquery.ajax/ – mittmemo

+0

錯誤被調用,如果請求失敗。所以,更有可能出現錯誤的PHP腳本,然後與jQuery。瀏覽器 - 開發者工具說什麼? (F12) –

+0

@mittmemo它返回'parsererror'和'語法錯誤:意外的輸入結束'。 – Joey

回答

0

你的代碼有許多膚色試試這個

<!DOCTYPE 'html'> 
<html> 
<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 


</head> 

<body> 
<form id="frmAdd" method="post" onsubmit="return false"> 
<label>Username *</label> 
     <input name="user" class="form-control" placeholder="Username" required autofocus><br> 
     <label>Password *</label><br> 
     <input type="password" name="password" class="form-control" placeholder="Password" required> 
     <input type="submit" name="submit" value="login" /> 
</form> 

<script> 
var data = {}; 
    $(document).ready(function() { 
     $("#frmAdd").validate({ 
     submitHandler: function() { 
        $("#frmAdd").submit(); 
       } 
     }); 
     $('#frmAdd').on('submit', function() { 
     var url = 'login.php'; 
      $.each($('form input, form select'), function(i, v) { 
       if (v.type !== 'submit') { 
        data[v.name] = v.value; 
       } 
      }); //end each 
      $.ajax({ 
       dataType: 'json', 
       type: 'POST', 
       url: url, 
       data: data, 
       success: function(resp) { 
        if (resp === true) { 
         //successful validation 
          $('form').submit(); 
         return false; 
        } else { 
         $.each(resp, function(i, v) { 
       console.log(i + " => " + v); // view in console for error messages 
          var msg = '<label class="error" for="'+i+'">'+v+'</label>'; 
          $('input[name="' + i + '"], select[name="' + i + '"]').addClass('inputTxtError').after(msg); 
         }); 
         var keys = Object.keys(resp); 
         $('input[name="'+keys[0]+'"]').focus(); 
        } 
        return false; 
       }, 
       error: function() { 
        console.log('there was a problem checking the fields'); 
       } 
      }); 
      return false; 
     }); 

    }); 

</script> 
     </body> 
</html>