提交 ajax 表单时 AddClass 不起作用

Question

我正在尝试为我的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文件(或者至少更新数据(时遇到了一些问题。问题已解决。

Answer 1

您在使用jquery UI吗？，因为addClass是jquery ui中的一个异步函数，因此，下一行的alert语句首先运行，它会阻塞主线程。