Question

我有一个表单，其中包含在提交时验证的字段。如果字段未通过验证，则我将文本放在字段下方（使用bootstrap form-group和help-block）

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

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

问题是当隐藏帮助块时，下面的所有元素都会向上移动。因此，如果用户更改字段并单击提交按钮，则（有时）仅触发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");
});

Answer 2

问题似乎是当焦点离开文本字段（模糊之后）时会触发更改事件，然后向上移动按钮 - 所以在点击事件发生的位置没有按钮（就像你一样）已经描述过。）

我认为没有直接的解决方案，但可能有解决方法：

您可以直接隐藏错误消息，但在提交时：例如：两个表单字段都有错误 - 都标有错误类，当用户单击提交按钮时，您可以重新验证字段，并根据需要隐藏/显示错误消息。

或者您可以使用其他事件而不是“onchange”。例如。您可以使用“onkeyup”，当用户在框中输入内容时会导致错误消息消失 - 因此在动画期间无法按下按钮。当我改变时，它对我有用：

$("input").change(...)

到

$("input").keyup(...)

当onchange移动提交按钮

2 个答案: