如何使错误消息更快消失

Question

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

是否有任何技巧可以解决这个问题？有效选择后，有没有办法让浏览器选项卡立即显示到下一个字段？在更改自定义错误消息之前，这不是问题。

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

我现在能想到的唯一解决方案是

element.next().focus()

Answer 1

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

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

案例2 ：即使您没有输入任何输入，几秒钟后HTML5验证消息也会消失。（请查看Plnkr case 1 }）

在您的代码中，当您点击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评论的解决方案：

是的，有一种方法可以使用您的自定义消息实现此目的。您只需要在ValidateInput()的{​​{1}}事件上调用change方法。

Working Plnkr

drop-down