对于如何控制表单中的提交事件，我有点困惑，我试图在这里找到一个简单的答案。
我想在将表单数据发送到表单操作脚本之前验证表单输入。我试图通过捕获submit事件、使用Ajax调用验证脚本来解决这个问题，如果验证成功，我希望调用实际的表单过程。但我不确定该如何进行。简单地使用location.replace（“action.php”）似乎会失败（我猜是没有发送表单值）。
下面是概念代码：
null
$("form").on("submit", function(event) {
event.preventDefault();
data = {
the_input_val: $("#input_to_be_validated").val()
};
$.post("ajax_validate_input.php", data, function(data, status) {
if (status == "success") {
if (data == "invalid") {
alert("Invalid input");
// Form data is not sent... as expected
} else {
// Here I want to send the form data. But the event.preventDefault() prevents it from happening
// What do I put here to call the form's 'action' script with form data?
}
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="action.php">
<input id="input_to_be_validated" name="my_input" type="text">
<button type="submit" name="submit">Submit</button>
</form>null
调用HTMLFormElement上的submit()方法以手动提交表单，而无需再次通过submit事件。
可以通过读取event对象的target属性来检索表单。
但是，要使其正常工作，请丢失按钮上的name=“submit”值，因为这将导致尝试使用该方法提交时出错。
null
const $form = $("form");
$form.on("submit", function(event) {
event.preventDefault();
const data = {
the_input_val: $("#input_to_be_validated").val()
};
$.post("ajax_validate_input.php", data, function(data, status) {
if (status == "success") {
if (data == "invalid") {
alert("Invalid input");
// Form data is not sent... as expected
} else {
event.target.submit();
}
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="action.php">
<input id="input_to_be_validated" name="my_input" type="text">
<button type="submit">Submit</button>
</form>
您可以像这样使用submit（）方法：
if (status == "success") {
if (data == "invalid") {
alert("Invalid input");
// Form data is not sent... as expected
} else {
event.submit();
}
}
