Angular JS textarea validation with required & showing error message

Question

I have a Angular JS code where i want to implement validation and focus on the field back if textarea is empty.

<form ng-submit="addComment()" role="form" name="blogForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : blogForm.blogComment.$invalid && replySubmitted }">
          <textarea ng-model="blogComment" name="blogComment" class="form-control" rows="3"  ng-required="true" required></textarea>
    </div>
    <div style="color:#a94442;" ng-show="blogForm.blogComment.$invalid && replySubmitted">
         <span ng-show="blogForm.blogComment.$error.required">Comment Text required.</span>
    </div>
    <button type="submit"  ng-click="replySubmitted = true" class="btn btn-primary blog-bubmit-button">Submit</button>
</form>

For some reasons the above code is just inserting empty data and field is focused Invalid. Any Suggestions may help me. Thanku

Stark Buttowski · Accepted Answer · 2016-05-03 11:07:37Z

1

you have define ng-app to process it as angular block.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=''>
  <form ng-submit="addComment()" role="form" name="blogForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : blogForm.blogComment.$invalid && replySubmitted }">
      <textarea ng-model="blogComment" name="blogComment" class="form-control" rows="3" ng-required="true" required></textarea>
    </div>
    <div style="color:#a94442;" ng-show="blogForm.blogComment.$invalid && replySubmitted">
      <span ng-show="blogForm.blogComment.$error.required">Comment Text required.</span>
    </div>
    <button type="submit" ng-click="replySubmitted = true" class="btn btn-primary blog-bubmit-button">Submit</button>
  </form>
</div>

answered May 3, 2016 at 11:07

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Angular JS textarea validation with required & showing error message

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