这是一个令人烦恼的小错误。在进行有效输入后,错误验证消息需要很长时间(大约 3 秒)才能消失。这是一个例子。
有什么技巧可以解决这个问题吗?有没有办法在有效选择后立即将浏览器选项卡切换到下一个字段?在我更改自定义错误消息之前,这不是问题。
遇到这个问题:https://plnkr.co/edit/oKYX6iUC6avbvfELjxWs?p=preview
我现在唯一能想到的办法是
element.next().focus()
最佳答案
对于必填字段,HTML5
验证消息消失的情况有两种:
情况 1:如果您在必填字段中输入任何有效输入,HTML5
验证消息将消失。 ( Working Demo )
情况 2:即使您没有输入任何内容,HTML5
验证消息也会在几秒后消失。(请查看 Plnkr
案例 1
)
在您的代码中,当您单击提交
时,将调用ValidateInput()
方法来设置自定义验证消息。
此验证消息可以通过 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()
方法。
<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>
关于javascript - 如何使错误消息更快消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36466227/