Пользовательское сообщение проверки ошибки не отображается

Рабочий план

Вы можете заменить HTML5 сообщение проверки этого конкретного поля на space при отправке формы. Это предотвратит отображение сообщения и не повлияет на другое HTML5 сообщение проверки.

JavaScript:

$scope.ValidateInput = function(){
    var email = document.getElementById("colorId");

    if (email.validity.valueMissing) {
        email.setCustomValidity(" ");
    } else {
        email.setCustomValidity("");
    }
  }

HTML:

<form name='serviceForm'>
      <select name='color' id='colorId' ng-model = "color" class = "form-control"
    ng-options = "color as color for color in colors" required>
         <option value="">Choose an option</option> 
      </select>

     <span ng-show="serviceForm.color.$error.required"> My custom error message </span>
     <input type='submit' ng-click='ValidateInput()' value='Submit'>
</form>

Это сообщение, скорее всего, исходит от вашего браузера, так как оно проверяет form. .

<form novalidate>

<select ng-model = "color" class = "form-control" name="lstColor"
    ng-options = "color as color for color in colors" data-msg-required="Please select color from list" required>
    <option value="">Choose an option</option> 
</select>

Попробуйте выше и надеюсь решить вашу проблему

<form novalidate> можно использовать, чтобы избежать этих сообщений.

Но вы также можете использовать функцию setCustomValidity, когда происходит событие oninvalid, чтобы заменить его вашим собственным сообщением.

Нравиться:

<input class="form-control" type="email"  required="" placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')"></input>

Полезное объяснение здесь.