自定义错误验证消息未显示

Question

I am doing error validation in Angular as follows.

<select 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>

The error validation shows up as expected, however, the custom message does not. Instead, I get the following.

This looks nice but how do I replace it with my custom message? It'd be cool if I know where that is coming from so I can edit it.

In addition, my custom message appears if I take out

<option value="">Choose an option</option> 

and then it always appears. Why is this?

Answer 1

This message most probably comes from your browser as it does form validaten .

You have to add the novalidate attribute to your form to disable it:

<form novalidate>

Answer 2

<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>

Try above and hope will solve your problem

Answer 3

<form novalidate> can be used to avoid these messages.

But you can also use setCustomValidity function when oninvalid event occurs to replace it with your custom message.

Like:

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

Helpful explanation here .

Answer 4

Working Plnkr

You can replace HTML5 validation message of that specific field with space on form submit. It will prevent displaying the message and will not affect other HTML5 validation message.

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>