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.

mlhuff12 · Accepted Answer · 2016-05-25 15:35:19Z

1

There are a few things wrong with your code.

Form isn't included, I am assuming you just didn't include that bit of code in this post.
You need to specify the name of the input. So when doing frm1.description, it knows what description is.
Make sure the function isValidationRequired returns true
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/

answered May 25, 2016 at 15:35

mlhuff12

608 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Coding Duchess Over a year ago

1. Form is there, I just did not include it. 2. I specified the id. 3. Yes, function returns true 4. When I include novalidate my validation stops working

Coding Duchess Over a year ago

I think you are onto something here. I changed id attribute to name and my validation showed up. Also added novalidate. Thanks. You rock!

Wagner Danda da Silva Filho · Accepted Answer · 2016-05-25 12:48:54Z

0

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

answered May 25, 2016 at 12:48

Wagner Danda da Silva Filho

5,5179 gold badges43 silver badges52 bronze badges

3 Comments

Coding Duchess Over a year ago

what will it do? And no, I am not getting the message I coded, I am getting the browser messsage

Wagner Danda da Silva Filho Over a year ago

@ElenaDBA "novalidate is used to disable browser's native form validation" -docs.angularjs.org/guide/forms

Coding Duchess Over a year ago

I tried that and it broke my validation. The thing is I do want to validate but I want it to display custom error message

Collectives™ on Stack Overflow

Angular custom validation message does not get displayed

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related