AJAX PHP验证 - 输入有效时表单不提交

时间:2017-08-14 13:25:07

标签: javascript jquery ajax

为什么这被标记为如何从AJAX获得响应的副本?我在回调函数中得到了响应吗?

我使用AJAX和PHP来检查用户的授权代码(基本上是密码)是否有效。如果用户的输入对存储的数据库值不正确,则它不允许提交表单。但是,尽管JS到达了回调函数并更改了输入类的样式以指示输入是正确的,但它在正确的情况下也不允许表单提交。

<form name="auth_form" id="auth_form" method="post" action="auth-action.php">
  <p>Please enter authorisation code.</p>
  <div style="width:400px;" class="form-group has-feedback" id="feedback" name="feedback">
    <input class="form-control" id="authcode" autocomplete="new-password" name="authcode" type="password" required>
    <span id="glyph" name="glyph" class="glyphicon form-control-feedback"></span>
  </div>
  </div>
  <button class="btn btn-primary" name="submit" type="submit">Submit</button>
  </div>
</form>
 $(document).ready(function() {
  $("#authcode").blur(function(e) {
    if (!checkValid()) {
      e.preventDefault();
    }
  });

  $('#auth_form').on('submit', function(e) {
    if (!checkValid()) {
      e.preventDefault();
    }
  });
});

function checkValid() {
  var authcode = $("#authcode").val();
  $.ajax({
    url: 'auth-action.php',
    type: 'POST',
    data: { 'authcode' : authcode },
    success: callback
  })
}

function callback(response) {
  var data = response;
  var IsValid = false;

  if (data.indexOf("success") > -1) {
    $('#feedback').addClass('has-success');
    $('#glyph').addClass('glyphicon-ok');
     $('#feedback').removeClass('has-error');
     $('#glyph').removeClass('glyphicon-remove');
     IsValid = true;
  } else {
     $('#feedback').addClass('has-error');
     $('#glyph').addClass('glyphicon-remove');
     $('#feedback').removeClass('has-success');
     $('#glyph').removeClass('glyphicon-ok');
     IsValid = false;
  }

  return IsValid;
}

0 个答案:

没有答案