Özel Hata Doğrulama Mesajı Gösterilmiyor

Question

Angular'da aşağıdaki gibi bir hata doğrulama yapıyorum.

Hata onaylaması beklendiği gibi ortaya çıkıyor, ancak özel mesaj çalışmıyor. Bunun yerine, aşağıdakileri alırım.

Bu güzel görünüyor ama nasıl benim özel mesajla bunu değiştiririm? Nereden geldiğini bilirsem iyi olur, böylece onu düzenleyebilirim. Ben

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

çıkar sonra herzaman görünürse ek olarak

, benim özel mesaj görüntülenir. Bu neden?

Answer 1

Working Plnkr

Sen form gönderme üzerinde space ile belirli alanın HTML5 doğrulama mesajı yerini alabilir. Mesajın görüntülenmesini engeller ve diğer HTML5 doğrulama mesajını etkilemez.

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> 

Answer 2

Bu ileti büyük olasılıkla tarayıcınızdan form validaten yaptığı gibi gelir.

Bunu devre dışı bırakmak için forma novalidate niteliğini eklemek zorunda:

<form novalidate> 

Answer 3

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

yukarıda deneyin ve umut bu mesajları engellemek için kullanılabilir sorununuzu

Answer 4

<form novalidate> çözecektir.

Ayrıca, özel iletinizle değiştirmek için oninvalid olay meydana geldiğinde setCustomValidity işlevini de kullanabilirsiniz.

gibi:

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

Yardımcı açıklama here.