onchange 移动提交按钮时未触发 Javascript onsubmit

Question

我有一个表单，其中包含在提交时验证的字段。如果字段验证失败，我会在字段下方放置一个文本(使用引导表单组和帮助 block )

当用户更改字段值时，应隐藏帮助 block 。

<input type="email" class="form-control" id="email" placeholder="Email">
<span class="help-block error-block collapse in">Invalid email</span>

问题是当隐藏帮助 block 时，下面的所有元素都会向上移动。因此，如果用户更改字段并单击提交按钮，那么(有时)只会触发 onchange 事件。

在此页面上，我只能在 Chrome 中重现该问题: http://codepen.io/casper-skovgaard/pen/mEBaZJ?editors=1111

在电子邮件字段中输入一些文本，然后单击提交按钮。只有 onchange 被触发。

如何确保始终触发 onsubmit？

Answer 1

您可以尝试删除类并在超时后折叠错误消息。使用不带延迟值的超时，浏览器将管理这个延迟的任务，并在开始折叠动画之前处理按钮上的点击。

http://codepen.io/ldlharper/pen/zBEyyV?editors=1111

setTimeout(function() {
    $control.closest('.form-group').removeClass('has-error').removeClass('has-success');
    $control.closest('.form-group').find('.error-block').collapse("hide");
});