14

这是我的表格的一部分：

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

每当我点击提交按钮时，什么都没有发生，页面只是重新加载.. 我想要它，所以它显示警报对话框。

4

3 回答 3

28

当您调用表单的submit函数时，submit不会触发该事件。这是 设计使然，假设如果您从代码触发提交，则您已经完成了任何必要的验证。（请注意，HTMLFormElement#submit函数是这样的；它周围的包装库不一定是这样的。）

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

于 2013-11-07T21:42:24.627 回答
12

您可以像这样覆盖原始原型“提交”方法：

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

HTMLFormElement.prototype.submit = function (){ 
   this._submit(); 
   alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};
于 2015-11-10T09:05:58.083 回答
2

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

根据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 示例

于 2013-11-07T21:57:29.943 回答