Custom Form Validation Not working in angularjs

Question

I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated

<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
                    <label for="name" class="col-xs-2">Your Name</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
                        <span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
                    </div>
                </div> 
                <div class="form-group">
                    <label for="rating" class="col-xs-2">Number of Stars</label>
                    <div class="col-xs-10">
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
                        </label>
                    </div>
                </div>
                <div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
                    <label for="comments" class="col-xs-2">Your comments</label>
                    <div class="col-xs-10">
                        <textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
                        <span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
                    </div>
                </div>                    
            </form>

Nitish · Accepted Answer · 2017-04-17 06:08:40Z

1

I think you only missed required in input element.

<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>

I just added required for one input element and its working.

Please check jsfiddle

answered Apr 17, 2017 at 6:08

Nitish

6611 gold badge7 silver badges15 bronze badges

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

Comments

Parth Akbari · Accepted Answer · 2017-04-17 06:19:54Z

I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.

AppForm is a form name.

<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
  <label for="input_0">Your label</label>
  <input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
  <div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
  <div ng-message="required">Custom Message</div>
  </div>
</md-input-container>

Collectives™ on Stack Overflow

Custom Form Validation Not working in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related