如何让错误消息更快消失

Question

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

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

有这个问题的笨蛋：https://plnkr.co/edit/oKYX6iUC6avbvfELjxWs?p=preview

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

element.next().focus()

Answer 1

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

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

案例2：即使不输入任何内容，HTML5的验证信息也会在几秒后消失。（与case 1的Plnkr核对）

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

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

1. 常规方式（在case 2中描述）
2. 在输入有效的情况下，点击submit 按钮。

由于您修改了ValidateInput() 方法中的默认验证消息，所以HTML5 验证消息（case 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评论的解决方案：

是的，有一种方法可以通过您的自定义消息实现此目的。您只需要在 change 两个 drop-down 的事件上调用 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>