{"id":17478,"date":"2015-02-19T16:42:53","date_gmt":"2015-02-19T11:12:53","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=17478"},"modified":"2017-08-03T15:58:28","modified_gmt":"2017-08-03T10:28:28","slug":"form-validations-using-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/form-validations-using-angularjs\/","title":{"rendered":"Form Validations using AngularJs"},"content":{"rendered":"

There are lots of ways to validate a web page like HTML5 validations, but why not do it in a better interactive way by\u00a0using AngularJS. AngularJS provides us with several form properties<\/a> for validation, which helps in providing instant feedback in case validation is violated.<\/p>\n

\u00a0 \u00a0 $valid:<\/strong> return true when input field is valid.<\/strong><\/p>\n

\u00a0 \u00a0 $invalid:<\/strong> return true when input field is invalid.<\/p>\n

\u00a0 \u00a0 $pristine:<\/strong> return true if input field has not been used yet.<\/p>\n

\u00a0 \u00a0 $dirty:<\/strong> return true if input field has been used.<\/p>\n

\u00a0 \u00a0 $error:<\/strong> Another useful property is the $error object that contains all of the validations \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0on a particular form whether they are valid or invalid.<\/p>\n

NOTE :<\/strong> The form must have a name associated with it to validate.<\/p>\n

Before using angular validations, we need to disable default validations provided by HTML5. For this, add novalidate<\/strong>\u00a0attribute in our form tag.<\/p>\n

[js]
\n<form name="userForm" novalidate>
\n…
\n<\/form
\n[\/js]<\/p>\n

Some Angular directives also provides validation (i.e ngRequired, ngMaxlength, ngPattern, ngTrim, ngMinlength, etc).<\/p>\n

Lets use\u00a0ngClass<\/strong> directive to set CSS dynamically\u00a0on invalid input field :<\/p>\n

[js]
\n<div class="form-group">
\n <label for="uMobile">Mobile<\/label>
\n <input type="text" ng-model="uMobile" required ng-class="{ ‘has-error’ : userForm.uMobile.$invalid && !userForm.uMobile.$pristine }" class="form-control" id="uMobile" name="uMobile" ng-pattern="\/^[0-9]+$\/" ng-minlength="10" ng-maxlength="10" placeholder="Mobile Number">
\n …
\n<\/div><\/p>\n

[\/js]<\/p>\n

Then, we\u00a0can also show the error message for each of our\u00a0inputs if they are invalid or\u00a0have already been used with ng-show<\/strong> directive.<\/p>\n

[js]<\/p>\n

<p ng-show="userForm.uMobile.$error.minlength" class="error">Mobile number is too short.<\/p>
\n<p ng-show="userForm.uMobile.$error.maxlength" class="error">Mobile number is too long.<\/p>
\n<p ng-show="userForm.uMobile.$error.pattern" class="error">Enter a numeric value<\/p><\/p>\n

[\/js]<\/p>\n

\u00a0<\/strong>Atlast to disable submit button if our form is $invalid,\u00a0ng-disabled <\/strong>is used\u00a0.<\/p>\n

[js]<\/p>\n

<button type="submit" class="btn btn-info btn-primary" ng-disabled="userForm.$invalid"> Submit<\/button><\/p>\n

[\/js]<\/p>\n

So in this way we can make use of Angular validations<\/a> for validating our webpages easily. For demo please visit my github page link<\/a>\u00a0.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n