Question

我有一个表单提交的事件处理程序，需要做一些工作。这项工作包括进行ajax调用以执行一些非常具体的验证。由于异步性质，我的目的是在事件处理程序的顶部preventDefault，如果一切顺利，通过触发submit()方法“手动”提交表单。

当然，这让我陷入了困境。如果我提交并且一切顺利，那么当我重新提交时会调用submit事件处理程序。当我手动触发提交时，有没有办法绕过处理程序？

我应该补充一点，我的极客业力在今天是空的，所以我可能会比现在更难。如果对于我正在尝试做的事情有一个简单的解决方案，我很乐意听到它。

我应该补充说，我已经通过简单地使jQuery $.ajax调用同步来实现一个可行的解决方案，但我不禁觉得有一种更有效的方法来完成这项工作我是只是今天没看到。

感谢。

Answer 1

~~不要在表单上放置提交按钮，将按钮绑定为“验证”机制（正确时）最终提交。~~

<击>

就向后兼容性而言，添加一个提交按钮，然后使用jQuery将按钮替换为一个自定义按钮（因此，如果他们不支持javascript，他们可以还在继续）。毕竟，服务器应该对这些情况进行输入验证/对表单进行黑客攻击。

重新考虑之后，移动验证逻辑的触发器。绑定到提交按钮的单击事件。这允许您在调用submit()之前进行干预。此事件还应始终返回false，因为您要等待AJAX响应以真正验证表单应提交或不提交的天气。

从那里开始，等待AJAX响应，并在一切顺利时调用submit。

关于向后兼容性，在以下情况下，您仍应具有此验证逻辑服务器端：

没有javascript支持（也许他们正在使用NoScript插件？）
使用感觉就像绕过表单逻辑并开始提交数据。
可能无法完成AJAX验证以及捕获和问题的任何其他（有效）原因。

Answer 2

您可以这样做：

<强> HTML：

<form id="my-form">
    <!-- your fields... -->
    <button type="submit">Submit</button>
</form>

<强> JS：

var myForm = $('#my-form');

myForm.on('submit', function(e, skipValidation) {
    if(skipValidation) {
        return;
    }

    yourAjaxValidation().then(function(){
        myForm.trigger('submit', [true]);
    })
})

Answer 3

<form id="myForm">
    <input type=button onclick="javascript:myFunct();return false;">

function myFunct(){

    $.post('ajax/test.html', function(data) {
         //do validation of ajax response
         if(all is good){
                $('#myForm').submit();
         }
    });

}

Answer 4

你想要做的是“解锁”这个功能。

var done = false;

function AjaxCallback()
{
  done = true;
  document.getElementById("myForm").submit();
}

function PerformAjax()
{
  if (!done)
  {
    // perform ajax here
    return false;
  }
  else
    return true;
}

<form id="myForm" onsubmit="javascript: return PerformAjax();">

绕过.submit（）处理程序

4 个答案: