javascript - How to make error messages disappear quicker -

here minor bug bothersome. error validation message takes long (about 3 seconds) disappear after valid input has been made. here example.

are there tricks make problem go away? there way make browser tab next field right away after valid selection? not problem before changed custom error message.

plunker problem: https://plnkr.co/edit/okyx6iuc6avbvfeljxws?p=preview

the solution can think of is

element.next().focus() 

there 2 cases when html5 validation message disappeared required field:

case 1: if enter valid input in required field, html5 validation message disappeared. (working demo)

case 2: if not enter input, html5 validation message disappeared after few seconds.(check plnkr of case 1)

in code, when click on submit, validateinput() method called sets custom validation message.

this validation message can disappered in 2 ways.

1. usual way (described in case 2)
2. with valid input, clicking on submit button.

as have modified default validation message in validateinput() method, default behavior of html5 validation message (case 1) not work. if remove validateinput() method, work expected (working demo).

    <form name='serviceform'>       <select id='colorid1' ng-model = "color1" class = "form-control"           ng-options = "color color color in colors" required>            <option value="">choose option</option>        </select><br><br>        <select id='colorid2' ng-model = "color2" class = "form-control"           ng-options = "color color color in colors"  required>            <option value="">choose option</option>        </select><br><br>        <input type='submit' value='submit'>    </form> 

hope answer question.

solution based on comment of jebmarcus:

yes, there way achieve custom message. need call validateinput() method on change event of both drop-down.

working plnkr

<form name='serviceform'>       <select ng-change='validateinput()' id='colorid1' ng-model = "color1" class = "form-control"           ng-options = "color color color in colors" required>            <option value="">choose option</option>        </select><br><br>        <select ng-change='validateinput()' id='colorid2' ng-model = "color2" class = "form-control"           ng-options = "color color color in colors" required>            <option value="">choose option</option>        </select><br><br>        <input type='submit' ng-click='validateinput()' value='submit'>    </form>