My angular form input[number] validation are not working

Question

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>

Started a fiddle, but ran out of time to lok into this (jsfiddle.net/mqRWy). — fncomp
– fncomp, Commented Sep 2, 2012 at 21:20
Using Josh's template, jsfiddle.net/FfMYt/6 You should be using pageForm.pageTxtField.$valid instead. — Tosh
– Tosh, Commented Sep 2, 2012 at 22:21

S Gupta · Accepted Answer · 2012-10-22 08:27:37Z

4

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!

edited Oct 22, 2012 at 8:27

answered Sep 4, 2012 at 13:06

S Gupta

1,5872 gold badges14 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

My angular form input[number] validation are not working

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