Javascript 以行动和提交的形式发布

我有一个HTML表单，其中我使用onsubmit验证输入，并在表单提交时调用URL。这是我的HTML代码：

<form  method="POST" onsubmit="return validateInput();" action="editConf" id="edit-form">

// HTML Form code
 <div class="modal-footer">
    <p id = "edit-footer" align="center"> </p>
    <button type="reset" onClick="resetForm()" class="btn btn-secondary" data-dismiss="modal" >Cancel</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
 </div>

---

我面临的问题是，URL首先完成执行，因此即使表单无效，它也会提交。如何解决这个问题

因为

$.ajax

是异步的，所以不能使用success函数的返回值

您需要立即阻止默认提交，然后在success函数中调用

submit（）

另外，在

数据：

选项中，您需要获取输入的值，即输入元素本身

函数validateInput（）{
//一些验证代码
$.ajax({
url:“验证\u凭据”，
键入：“POST”，
数据：{
数据：$（“#数据”）.val（）
},
数据类型：“json”，//添加了数据类型
成功：功能（res）{
if（res&&valid）{
$（“#bigeror”）.innerHTML=res；
$（“#编辑输入”）.submit（）；
}
}
});
返回false；
}

如果要进行自定义异步验证，应防止出现默认事件

<form id="myForm"  method="POST" action="editConf" id="edit-form">

现在不提交表格。但是现在您必须考虑如何将表单的数据发送到服务器。有几种变体

1） 您可以获取表单数据，并通过模仿表单的ajax发送它

---

2） 您可以在某个地方存储一个标志，标记表单有效，如果有效，则不要停止从脚本提交表单，也不要停止事件。

$。ajax

是异步的

validateInput（）

在发送请求后立即返回，它不会等待函数成功。那么我如何处理这种情况呢？

onsubmit=“validateInput”

-现在该函数根本不会被调用

return false

对所有内容都返回false。@kingforever-是的，这就是重点。阅读本答案第二段的后半部分。我有一个弹出窗口（模态），它因此保持打开状态。如果我打印

res

它将无限循环。请尝试我刚才添加到答案中的更改。

<form id="myForm"  method="POST" action="editConf" id="edit-form">

$('#myForm').on('submit', validateInput)
function validateInput(event) {
event.preventDefault(); //Here we stoped defauld submit event
// some validation code
$.ajax({

    url: "validate_credentials",
    type: 'POST',
    data: { data: document.getElementById('data') },
    dataType: 'json', // added data type

    success: function(res) {

        if (res && valid) {

            $("#bigerror").innerHTML = res;
            return true;
        } else {
            return false;
        }
    }

});