采取行动，并以表格形式提交

Question

我有一个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>

这是我的脚本代码：

function validateInput() {
// 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;
        }
    }

});

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

Answer 1

由于$.ajax是异步的，因此不能使用成功函数的返回值。

您需要立即阻止默认的提交，然后在成功函数中调用submit() 。

另外，在data:选项中，您需要获取输入值，即输入元素本身。

 function validateInput() { // some validation code $.ajax({ url: "validate_credentials", type: 'POST', data: { data: $("#data").val() }, dataType: 'json', // added data type success: function(res) { if (res && valid) { $("#bigerror").innerHTML = res; $("#edit-input").submit(); } } }); return false; } 

为了防止这种情况无限循环，因为submit()运行相同的验证函数，所以从表单中删除onsubmit ，然后将其移至Submit按钮。

<button type="submit" class="btn btn-primary" onclick="return validateInput();">Save changes</button>

Answer 2

如果要进行自定义异步验证，则应阻止默认事件。

<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;
        }
    }

});

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

1）您可以获得表格数据并使用模仿表格的ajax发送

2）您可以将标记存储在标记您的表单有效的位置，如果有效，请不要停止从脚本中提交表单，也不要停止事件。