css - 修复错误后的 Bootstrap 4 beta 服务器端验证

Question

我使用的是 Bootstrap 4.0.0.beta，我可以通过向提交时无效的输入添加 .is-invalid 类来添加服务器端验证。但是，当用户修复此输入中的错误时(例如，通过填写需要但未填写的输入)，输入仍然具有 .is-invalid 类，所以我认为这可以让用户有些困惑，因为他们可能认为输入仍然无效(即使它不是)。

解决这个问题最优雅的方法是什么？我在考虑要么结合客户端验证，要么通过 Javascript 仅通过 .is-invalid 类监听输入的变化，并在它们被填充时删除该类。

Answer 1

这应该通过使用 Javascript 来实现。

如果一个 keyup 事件就足够了，你可以这样做:

内联 Javascript

<input type="text" class="is-invalid" onkeyup="this.classList.remove('is-invalid')">

jQuery

<input type="text" class="is-invalid">

-

$('input').keyup(function () {
    $(this).removeClass('is-invalid');
});