Angular custom validation message does not get displayed

Question

I am having trouble displaying custom message upon validation in my AngularJS app.

Below is my code:

<div class="row">
    <div class="input-field col s12">
       <input id="description" rows="3" class="materialize-textarea no-pad-bot no-pad-top" ng-model="Description" ng-required="isValidationRequired()" ng-minlength="5"></input>
        <span class="help-inline" ng-show="submitted && frm1.description.$error.required">Comments are required</span>

     </div>
 </div>

 <input type="submit" class="white-text waves-effect btn" value="Enter" ng-click="submitted=true" />

The above works but the message displayed is "Please fill out this field". Which is not the message I specified. I want my own custom message displayed. I cannot find anything wrong with my code. Can anyone help point me in the right direction.

Answer 1

There are a few things wrong with your code.

1. Form isn't included, I am assuming you just didn't include that bit of code in this post.

2. You need to specify the name of the input. So when doing frm1.description, it knows what description is.

3. Make sure the function isValidationRequired returns true

4. You need to include novalidate in the form tag

Here, I have a working example

  <form novalidate name="frm1">
<div class="row">
<div class="input-field col s12">
   <input name="description" id="description" rows="3" class="materialize-textarea no-pad-bot no-pad-top" ng-model="Description" ng-required="isValidationRequired()" ng-minlength="5"></input>
    <div class="help-inline" ng-show="submitted && frm1.description.$error.required">Comments are required</div>

 </div>

http://jsfiddle.net/mlhuff12/Lvc0u55v/4503/

Answer 2

Ur getting a message you did code? Sounds like a browser validation. Check your statement and add "novalidate" to it. I.e.

<form novalidate>

Maybe this helps...