PHP Ajax表单验证未通过json

PHP Ajax form validation not passing json

本文关键字:json 验证 Ajax 表单 PHP      更新时间:2023-09-26

我几天来一直在尝试修复我的代码,但没有成功。我正在尝试使用AJAX验证我的登录表单。Jquery AJAX一直用记录控制台

检查字段时出现问题

这是我的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有问题,但我一直没能找到。

提前感谢!:)

你的代码有很多颜色,试试这个

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