Question

这是我表单的一部分：

<form name='form-main' onsubmit='return validate()' action='' method='post'>
    <center><input type='submit' onClick='this.disabled=true; this.form.submit();' value='I accept - Download the GM!'/></center>
</form>

这是validate函数：

function validate()
{
    // this is just to test if it actually shows
    alert('You must not leave any of the fields blank!');
    return false;
}

每当我点击提交按钮，没有任何反应，页面只是重新加载..我希望它显示警告对话框。

Answer 1

当您调用表单的submit函数时，不会触发submit事件。 This is by design，假设如果您从代码触发提交，则您已经完成了任何必要的验证。（请注意，对于HTMLFormElement#submit函数来说，这是正确的;它周围的包装器库不必然是正确的。）

在您的示例中，我将删除按钮上的click处理程序。这是一个提交按钮，所以只需在表单上的submit事件中放入任何相关逻辑。或者，如果您愿意，可以将validate()作为按钮click的一部分来呼叫。

Answer 2

您可以覆盖原始的“提交”方法，如下所示：

HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;

HTMLFormElement.prototype.submit = function (){ 
   this._submit(); 
   alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};

Answer 3

提交按钮的onclick事件在表单的onsubmit事件之前立即触发，这会禁止后续事件传播和触发，这会导致validate函数永远不会被触发。您可以看到，这是从代码示例中删除this.disabled=true;。

根据docs at W3：

禁用的表单控件必须阻止任何单击事件在调度的用户交互任务源上排队元素。

您应该从提交按钮中删除点击事件代码，只需让该功能执行您需要它执行的操作，包括禁用该按钮。例如：

function validate() {
    // this is just to test if it actually shows
    document.getElementById('sub').disabled=true;
    alert('You must not leave any of the fields blank!');
    return false;
}

<强> jsFiddle example

表格'onsubmit'没有被调用

3 个答案: