There are two scenarios when the validation message in HTML5 disappears for a required field:
Scenario 1: When a valid input is entered into the required field, the HTML5 validation message will disappear. (See Demo)
Scenario 2: Even if no input is entered, the HTML5 validation message will disappear after a few seconds. (Refer to the Plnkr of scenario 1)
In your code, clicking on Submit triggers the ValidateInput() method which sets a custom validation message.
This validation message can disappear in 2 ways.
- The usual way explained in
scenario 2
- By providing valid input and clicking on the
submit button
Since you have altered the default validation message in the ValidateInput() method, the default behavior of the HTML5 validation message (scenario 1) will not function as expected. Removing the ValidateInput() method will restore the expected behavior. (See 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>
I hope this answers your question.
Solution based on jebmarcus's comment:
Yes, it is possible to achieve this with your custom message. You just need to call the ValidateInput() method on the change event of both dropdowns.
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>