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

Question

我正在 Angular 中进行错误验证，如下所示。

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

错误验证按预期显示，但是自定义消息没有。相反，我得到以下信息。

这看起来不错，但 如何用我的自定义消息替换它？ 如果我知道它的来源以便我可以编辑它，那就太好了。

此外，如果我取出

，我的自定义消息会出现

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

然后它总是出现。这是为什么？

Answer 1

此消息很可能来自您的浏览器，因为它确实如此 form validaten。

您必须将 novalidate 属性添加到表单才能禁用它：

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

试试上面的方法，希望能解决你的问题

Answer 3

<form novalidate> 可用于避免这些消息。

但您也可以在 oninvalid 事件发生时使用 setCustomValidity 函数将其替换为您的自定义消息。

喜欢：

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

有用的解释here。

Answer 4

Working Plnkr

您可以在表单提交时用 space 替换该特定字段的 HTML5 验证消息。它将阻止显示该消息并且不会影响其他 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>

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

Custom Error Validation Message Not Showing

html

javascript

error-handling

requiredfieldvalidator

angularjs