行动问题和表单提交答案

【问题标题】：Issue with action and onsubmit in form行动问题和表单提交
【发布时间】：2018-06-14 17:01:10
【问题描述】：

我有一个 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 首先完成其执行，因此即使表单无效，它也会提交。如何解决这个问题？

【问题讨论】：

$.ajax 是异步的。 validateInput()发送请求后立即返回，不等待成功函数。
那我该如何处理这种情况呢？

标签： javascript ajax asynchronous action onsubmit

【解决方案1】：

由于$.ajax是异步的，所以不能使用success函数的返回值。

你需要立即阻止默认提交，然后在成功函数中调用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，并将其移动到提交按钮。

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

【讨论】：

return false 对所有内容都返回 false。
@kingforever — 是的，这就是重点。阅读此答案第二段的后半部分。
我有这个弹出窗口（模态），因此它保持打开状态。如果我打印res，它会无限循环。
试试我刚刚添加到答案中的更改。

【解决方案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) 您可以在某处存储一个标志，标记您的表单有效，如果它有效，请不要停止从您的脚本提交表单，也不要停止事件。

【讨论】：

onsubmit="validateInput" — 现在该函数根本不会被调用