提交AJAX表单时addClass()方法失效问题及解决

问题描述 #

为AJAX表单添加前端验证逻辑：提交表单时，若带有required类的输入框为空，就为其添加红色边框（通过addClass('error')实现）。但实际测试时，仅能弹出提示弹窗，addClass()方法未生效，查阅相关帖子后仍未解决。

代码示例 #

JavaScript #

$(function() {
  $('#form').on('submit', function(e) {
    e.preventDefault();

    if ($('.required').val() === '') {
      $('.required').addClass('error');
      alert("error");
    }

    $.ajax({
      type: "post",
      url: 'php/php.php',
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function() {
        document.getElementById("text").innerHTML = "success";
        document.getElementById("add").style.border = "2px solid green";
      },
      error: function() {
        document.getElementById("text").innerHTML = "error";
        document.getElementById("add").style.border = "2px solid red";
      }
    });
  });
});

CSS #

.error {
  border: solid 2px red;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="form" method="POST" action="php/php.php">
  Name:
  <input type="text" name="Name" id="name" class="required"><br>
  <input type="submit" name="Add" id="add">
</form>

问题排查与解决 #

后续排查发现，问题并非代码逻辑错误，而是XAMPP在加载外部CSS文件（或缓存更新）时出现异常，导致添加的error类样式无法生效。解决XAMPP的资源加载/缓存问题后，addClass()方法即可正常为输入框添加红色边框。

内容的提问来源于stack exchange，提问作者Astw41