Required error messages not getting displayed in AngularJS

Question

I am having trouble with displaying required error messages in one of my pages.

HTML :

<div ng-form="editReservationForm">
    <form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="reservation.employee.firstName">First Name<sup>*</sup></label>
                <div class="controls">
                    <input class="span4" name="reservation.employee.firstName" placeholder="First Name" ng-model="reservation.employee.firstName" disabled />
                </div> <!-- /controls -->
            </div> <!-- /control-group -->


            <div class="control-group">
                <label class="control-label" for="reservation.employee.lastName">Last Name<sup>*</sup></label>
                <div class="controls">
                    <input class="span4" name="reservation.employee.lastName" placeholder="Last Name" ng-model="reservation.employee.lastName" disabled />
                </div> <!-- /controls -->
            </div> 

            <div class="control-group">
                <label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" required>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>

                    <span style="color:red">{{errMessageFrom}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->
            <div class="control-group">
                <label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
                           validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr()' />-->
                    <input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill"  ng-change='checkErr()' id="endDate1" required>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span  style="color:red">{{errMessageTo}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->



            <!--DATE PICKER-->
            <div class="control-group">
                <label class="control-label" for="reservation.account.name" >Account Name<sup>*</sup></label>
                <div class="controls">
                    <select ng-model="reservation.account.id" required>
                        <option ng-repeat="p in accounts"  value="{{p.id}}" required>{{p.name}}</option>
                    </select>
                </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <!--<div class="control-group">
                <label class="control-label" for="reservation.poc.name">POC Name</label>
                <div class="controls">
                    <select ng-model="reservation.poc.id">
                        <option ng-repeat="p in pocs" value="{{p.id}}">{{p.name}}</option>
                    </select>
                </div> <!-- /controls -->
            <!--</div>--> <!-- /control-group -->
            <div class="control-group">
                <label class="control-label" for="reservation.remark" >Remarks : <sup>*</sup></label>
                <div class="controls">
                    <input type="text" required id="remarksText" class="span4" name="reservation.remark" placeholder="Enter your remarks here" ng-model="reservation.remark" />
                </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="form-actions">
                <button type="button" class="btn btn-primary" validation-submit="editReservationForm" ng-click="updateReservation()">Save</button>
                <button ng-click="cancel()" class="btn">Cancel</button>
            </div> <!-- /form-actions -->
        </fieldset>
    </form>

</div>

I have added the required tag along with all input fields but upon click of 'Save' button, the error messages that show 'This field is required' is not shown. The function is not getting called though.

I need help in finding the cause of this issue.

Where are the {{errMessageFrom}} and {{errMessageTo}} coming from? Also, where is your ng-message(s)? — rrd
– rrd, Commented Dec 5, 2016 at 9:21
w3schools.com/TAgs/tryit.asp?filename=tryhtml5_input_required It is supposed to create a message if we use the required tag? even without span? correct? — Phoenix
– Phoenix, Commented Dec 5, 2016 at 9:27
the {{errMessageFrom}} is generating the message fine as expected. I am having issue with other fields — Phoenix
– Phoenix, Commented Dec 5, 2016 at 9:27
Try removing novalidate attribute from form tag. It will prevent the default browser validation. Any using browser validation is not a good idea. It depends on browser. — Jithu Rajan
– Jithu Rajan, Commented Dec 5, 2016 at 9:42

Gaurav Goenka · Accepted Answer · 2016-12-06 08:51:44Z

1

Keep the novalidate in the <form> tag.

Try changing required to ng-required="true".

ng-required works with ng-model. So make sure that ng-model exists in your input tag. (additional info)

Try adding

<span style="color:red" ng-show="editReservationForm.inputFieldName.$invalid && editReservationForm.inputFieldName.$touched">
                Required field.
</span>

where inputFieldName is the respective name attribute.

This adds for better effect although you'll need to import angular-animate.min.js and add it as a dependency too.

answered Dec 6, 2016 at 8:51

Gaurav Goenka

14212 bronze badges

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

Collectives™ on Stack Overflow

Required error messages not getting displayed in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related