My angular form input[number] validation are not working

Question

My angular form input[number] validation are not working

My angular form only shows the text that I've defined below. It is not showing the red color in the form input field to tell users that there is an error. Please tell me what is going on.

Please help.

Thanks!

I've included following files in the page:

<script src="js/lib/angular/angular-1.0.1.js"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

I include a template called users.html and this users.html further includes the following template called pagination.html:

<div style="padding-left: 252px;">
   <form name="pageForm" ng-submit="search()">
      Page: <input name="pageTxtField" ng-model="request.page" type="number" 
                required min="1" max="{{totalPages}}" style="width:30px;" ng-pattern="/[0-9]+/" /> of <span ng-bind="totalPages"></span>
   <span class="error" ng-show="pageForm.pageTxtField.$error.required">
        Please enter a number!</span>
   <span class="error" ng-show="pageForm.pageTxtField.$error.valid">
     Enter valid number!</span>
   </form>
</div>

javascript
angularjs

Answer 1

I resolved this. My style sheet now looks like this:

form span.error {
   color: red;
}

form.ng-invalid input.ng-invalid {
   border-color: red;
   outline-color: red;
}

I'm posting this answer so it can help somebody with the same problem.

Thanks!