{"id":104,"date":"2017-01-24T03:37:12","date_gmt":"2017-01-24T03:37:12","guid":{"rendered":"http:\/\/codeinsightacademy.com\/blog\/?p=104"},"modified":"2017-05-13T05:28:22","modified_gmt":"2017-05-13T05:28:22","slug":"form-field-validation","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/angular-js\/form-field-validation\/","title":{"rendered":"form field validation"},"content":{"rendered":"

The problem is that your REGX pattern will only match the input “0-9”.<\/p>\n

To meet your requirement (0-9999999), you should rewrite your regx pattern:<\/p>\n

ng-pattern=\"\/^[0-9]{1,7}$\/\"<\/code><\/p>\n

HTML:<\/p>\n

<div ng-app ng-controller=\"formCtrl\">\r\n    <form name=\"myForm\" ng-submit=\"onSubmit()\"> \r\n        <input type=\"number\" ng-model=\"price\" name=\"price_field\" ng-pattern=\"\/^[0-9]{1,7}$\/\" required> \r\n        <span ng-show=\"myForm.price_field.$error.pattern\">Not a valid number!<\/span> \r\n        <span ng-show=\"myForm.price_field.$error.required\">This field is required!<\/span> \r\n        <input type=\"submit\" value=\"submit\"\/> \r\n    <\/form> \r\n<\/div> \r\n<\/pre>\n
JS:<\/p>\n
function formCtrl($scope){ \r\n    $scope.onSubmit = function(){ \r\n        alert(\"form submitted\"); \r\n    } \r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n

\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
The problem is that your REGX pattern will only match the input “0-9”. To meet your requirement (0-9999999), you should rewrite your regx pattern: ng-pattern=”\/^[0-9]{1,7}$\/” HTML: <div ng-app ng-controller=”formCtrl”> <form name=”myForm” ng-submit=”onSubmit()”> <input type=”number” ng-model=”price” name=”price_field” ng-pattern=”\/^[0-9]{1,7}$\/” required> <span ng-show=”myForm.price_field.$error.pattern”>Not a valid number!<\/span> <span ng-show=”myForm.price_field.$error.required”>This field is required!<\/span> <input type=”submit” value=”submit”\/> <\/form> <\/div> JS: function […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/104"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":6,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/104\/revisions\/287"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}