提交 ajax 表单时 AddClass 不起作用-解网

问：

我正在尝试为我的ajax表单创建验证。当您提交表单时，当输入为空时，我想在输入周围创建一个红色边框。

不幸的是，不起作用。警报显示，但仅此而已。addClass()

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

.error {
  border: solid 2px red;
}

<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文件（或至少更新数据）时遇到了一些问题。问题已解决。

JavaScript jQuery CSS AJAX 验证

我将您的代码编辑为一个代码片段，您可以在其中看到类已正确添加，并且红色边框可见。如果它不适合您，则需要进一步调试。我建议确保类具有足够高的优先级顺序，以覆盖元素上的任何现有样式。但是，就目前而言，您的演示代码运行良好，因此我投票决定关闭此问题，直到您可以提供准确的信息以便能够对其进行调试。.error

0赞 Astw41 8/1/2022

感谢您的回复。似乎这是一个 xampp 错误，一切正常。

0赞 Rory McCrossan 8/1/2022

在这种情况下，我建议删除问题。

答：

0赞 Aman 8/1/2022 #1

你使用的是jquery UI吗？，因为jquery ui中有一个异步函数，因此，首先运行下一行中的语句，这会阻塞主线程。addClassalert

提交 ajax 表单时 AddClass 不起作用

AddClass doesn't work when ajax form is submitted

评论

评论