javascript - 如何使错误消息更快消失

Question

这是一个令人烦恼的小错误。在进行有效输入后，错误验证消息需要很长时间(大约 3 秒)才能消失。这是一个例子。

有什么技巧可以解决这个问题吗？有没有办法在有效选择后立即将浏览器选项卡切换到下一个字段？在我更改自定义错误消息之前，这不是问题。

遇到这个问题:https://plnkr.co/edit/oKYX6iUC6avbvfELjxWs?p=preview

我现在唯一能想到的办法是

element.next().focus()

Answer 1

对于必填字段，HTML5 验证消息消失的情况有两种:

情况 1:如果您在必填字段中输入任何有效输入，HTML5 验证消息将消失。 ( Working Demo )

情况 2:即使您没有输入任何内容，HTML5 验证消息也会在几秒后消失。(请查看 Plnkr 案例 1)

在您的代码中，当您单击提交 时，将调用ValidateInput() 方法来设置自定义验证消息。

此验证消息可以通过 2 方式消失。

1. 常规方式(在案例 2 中描述)
2. 输入有效后，单击提交 按钮。

由于您在 ValidateInput() 方法中修改了默认验证消息，因此 HTML5 验证消息(案例 1)的默认行为将不行。如果您删除 ValidateInput() 方法，它将按预期工作 (Working Demo)。

    <form name='serviceForm'>
      <select id='colorId1' ng-model = "color1" class = "form-control"
          ng-options = "color as color for color in colors" required>

          <option value="">Choose an option</option> 
      </select><br><br>

      <select id='colorId2' ng-model = "color2" class = "form-control"
          ng-options = "color as color for color in colors"  required>

          <option value="">Choose an option</option> 
      </select><br><br>

      <input type='submit' value='Submit'>
   </form>

希望能回答您的问题。

根据jebmarcus的评论解决:

是的，有一种方法可以通过您的自定义消息实现这一点。您只需要在 drop-down 的 change 事件上调用 ValidateInput() 方法。

Working Plnkr

<form name='serviceForm'>
      <select ng-change='ValidateInput()' id='colorId1' ng-model = "color1" class = "form-control"
          ng-options = "color as color for color in colors" required>

          <option value="">Choose an option</option> 
      </select><br><br>

      <select ng-change='ValidateInput()' id='colorId2' ng-model = "color2" class = "form-control"
          ng-options = "color as color for color in colors" required>

          <option value="">Choose an option</option> 
      </select><br><br>

      <input type='submit' ng-click='ValidateInput()' value='Submit'>
   </form>