{"id":1549,"date":"2016-05-15T14:41:02","date_gmt":"2016-05-15T14:41:02","guid":{"rendered":"http:\/\/box.jharaphula.com\/?p=1549"},"modified":"2022-09-04T07:49:54","modified_gmt":"2022-09-04T13:19:54","slug":"angularjs-form-validation-example","status":"publish","type":"post","link":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/","title":{"rendered":"AngularJS Form Validation (Required, Email, Number & Date) Examples"},"content":{"rendered":"

In web technology validation is used to prevent spam entries. There are various kind of form fields validations. Some of them are Required field validation, email validation, date field validation or number validation. In this demo app I created these 4 AngularJS Form Validation (Required Field, Email, Number and Date<\/em>).<\/p>\n

In the below app I have 4 form fields Name, Email, Contact Number & Date of Birth. Name is a required field. Without Name an user is not allowed to submit the form. As an advanced feature AngularJS<\/a> made validations easy. By simply adding a single line of code ng-show=\"userForm.name.$error.required\"<\/code>
\n<\/span> I can easily made Name field as mandatory.<\/p>\n

To valid an email here I used pattern. Validating the pattern against email entry using AngularJS ng-pattern directive. Similar thing I did for Number validation is Contact Number field. To validate Date field in the beginning of script block I declared a variable for date pattern with value YYYY-MM-DD. Using ng-pattern in date field validating the date pattern variable.<\/p>\n

AngularJS-Form-Validation.htm<\/h3>\n
<!Doctype html>\r\n<html lang="en">\r\n<head>\r\n<title>AngularJS Form Validation Example<\/title>\r\n<script type="text\/javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.0\/angular.min.js"><\/script>\r\n<script type="text\/javascript">\r\nvar validateApp=angular.module('validateAngularApp',[]);\r\nvalidateApp.controller("validateAngularctrl",function($scope){\r\n\/*Page Title goes Here*\/\r\n$scope.title="Validations using AngularJS";\r\n\/*Date pattern you can update Here*\/\r\n$scope.datepattern="YYYY-MM-DD";\r\n$scope.userRegester=function(name, email, contact, dob) {\r\nif(name!=null || email!=null || contact!=null || dob!=null)\r\n{\r\nalert("Registration Successfull !!!");\r\n}\r\nelse\r\n{\r\nalert("Not Successfull Please try again.");\r\n}\r\n}\r\n});\r\n<\/script>\r\n<\/head>\r\n<body ng-app="validateAngularApp" ng-controller="validateAngularctrl">\r\n<div role="main">\r\n<header>\r\n<h2>{{title}}<\/h2>\r\n<\/header>\r\n<section>\r\n<h2>Registration User Form<\/h2>\r\n<form role="form-inline" name="userForm" action="" method="" novalidate>\r\n<div>\r\n<label for="name">Name:<\/label>\r\n<input type="text" name="name" ng-model="uname" placeholder="Enter your name" required \/>\r\n<!-- show an error if this isn't filled in -->\r\n<span ng-show="userForm.name.$error.required" ng-style="{color:'red'}">Your name is required.<\/span>\r\n<\/div>\r\n<div>\r\n<label for="email">Email:<\/label>\r\n<input type="email" name="email" ng-model="uemail" placeholder="Enter your email" ng-pattern="\/^[a-z]+[a-z0-9._]+@[a-z]+\\.[a-z.]{2,5}$\/ " required\/>\r\n<span ng-show="userForm.email.$error.required" ng-style="{color:'red'}">Your email is required .<\/span>\r\n<span ng-show="userForm.email.$error.pattern" ng-style="{color:'red'}">Your email should be in correct format ex abc@gmail.com .<\/span>\r\n<\/div>\r\n<div>\r\n<label for="contact Number">Contact Number:<\/label>\r\n<input type="text" name="contactNumber" ng-model="ucontact" placeholder="Enter your Contact details" ng-pattern="\/^[0-9]{10,10}$\/" ng-minlength="10" ng-maxlength="10" required \/>\r\n<span ng-show="userForm.contactNumber.$error.required" ng-style="{color:'red'}">Your contact is required .<\/span>\r\n<span ng-show="userForm.contactNumber.$error.pattern" ng-style="{color:'red'}">Mobile should be numeric<\/span>\r\n<span ng-show="userForm.contactNumber.$error.minlength" ng-style="{color:'red'}">contact number should be minimum of 10 digits .<\/span>\r\n<span ng-show="userForm.contactNumber.$error.maxlength" ng-style="{color:'red'}">contact number should be maximum of 10 digits .<\/span>\r\n<\/div>\r\n<div>\r\n<label for="date_of_birth">Date of Birth:<\/label>\r\n<input type="text" name="dob" ng-model="udob" placeholder="Enter your date of birth in the format of YYYY-MM-DD" ng-pattern="datepattern"required \/>\r\n<span ng-show="userForm.dob.$error.required" ng-style="{color:'red'}">Your date of birth is required <\/span>\r\n<span ng-show="userForm.dob.$error.pattern" ng-style="{color:'red'}">Date of Birth must be in the format of YYYY-MM-DD<\/span>\r\n<\/div>\r\n<button type="submit" ng-click="userRegester(e1,e2,e3,e4)">Register<\/button>\r\n<\/form>\r\n<\/section>\r\n<footer>&copy; All right reserved<\/footer>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
In web technology validation is used to prevent spam entries. There are various kind of form fields validations. Some of them are Required field validation,…<\/p>\n","protected":false},"author":3,"featured_media":1918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[36410,38471,39569,37096,39570],"class_list":["post-1549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-angularjs-with-examples","tag-angularjs","tag-angularjs-with-examples","tag-form-validation","tag-jquery-email-validation","tag-validation-examples"],"yoast_head":"\nAngularJS Form Validation (Required, Email, Number & Date) Examples<\/title>\n<meta name=\"description\" content=\"Validation is the way using which we can prevent spam entries. In this demo I created AngularJS Form Validation for Required filed, date, email & number.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Form Validation (Required, Email, Number & Date) Examples\" \/>\n<meta property=\"og:description\" content=\"Validation is the way using which we can prevent spam entries. In this demo I created AngularJS Form Validation for Required filed, date, email & number.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\" \/>\n<meta property=\"og:site_name\" content=\"OneStop Shop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tajinweb\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-15T14:41:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T13:19:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"467\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nibedita Panda\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nibedita Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\"},\"author\":{\"name\":\"Nibedita Panda\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\"},\"headline\":\"AngularJS Form Validation (Required, Email, Number & Date) Examples\",\"datePublished\":\"2016-05-15T14:41:02+00:00\",\"dateModified\":\"2022-09-04T13:19:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\"},\"wordCount\":831,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg\",\"keywords\":[\"AngularJS\",\"AngularJS with Examples\",\"Form Validation\",\"Jquery Email Validation\",\"Validation Examples\"],\"articleSection\":[\"AngularJS with Examples\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\",\"url\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\",\"name\":\"AngularJS Form Validation (Required, Email, Number & Date) Examples\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg\",\"datePublished\":\"2016-05-15T14:41:02+00:00\",\"dateModified\":\"2022-09-04T13:19:54+00:00\",\"description\":\"Validation is the way using which we can prevent spam entries. In this demo I created AngularJS Form Validation for Required filed, date, email & number.\",\"breadcrumb\":{\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg\",\"width\":750,\"height\":467,\"caption\":\"AngularJS Form Validation (Required, Email, Number & Date) Examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jharaphula.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AngularJS Form Validation (Required, Email, Number & Date) Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jharaphula.com\/#website\",\"url\":\"https:\/\/jharaphula.com\/\",\"name\":\"OneStop Shop\",\"description\":\"Blog for SEO Guest Posting, Digital Marketing or Home Remedies\",\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jharaphula.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jharaphula.com\/#organization\",\"name\":\"OneStop Shop\",\"url\":\"https:\/\/jharaphula.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"width\":409,\"height\":91,\"caption\":\"OneStop Shop\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tajinweb\",\"https:\/\/x.com\/guestpostingopp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\",\"name\":\"Nibedita Panda\",\"description\":\"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.\",\"sameAs\":[\"https:\/\/jharaphula.com\"],\"url\":\"https:\/\/jharaphula.com\/author\/nibeditap\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Form Validation (Required, Email, Number & Date) Examples","description":"Validation is the way using which we can prevent spam entries. In this demo I created AngularJS Form Validation for Required filed, date, email & number.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Form Validation (Required, Email, Number & Date) Examples","og_description":"Validation is the way using which we can prevent spam entries. In this demo I created AngularJS Form Validation for Required filed, date, email & number.","og_url":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/","og_site_name":"OneStop Shop","article_publisher":"https:\/\/www.facebook.com\/tajinweb","article_published_time":"2016-05-15T14:41:02+00:00","article_modified_time":"2022-09-04T13:19:54+00:00","og_image":[{"width":750,"height":467,"url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg","type":"image\/jpeg"}],"author":"Nibedita Panda","twitter_misc":{"Written by":"Nibedita Panda","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#article","isPartOf":{"@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/"},"author":{"name":"Nibedita Panda","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3"},"headline":"AngularJS Form Validation (Required, Email, Number & Date) Examples","datePublished":"2016-05-15T14:41:02+00:00","dateModified":"2022-09-04T13:19:54+00:00","mainEntityOfPage":{"@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/"},"wordCount":831,"commentCount":1,"publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"image":{"@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg","keywords":["AngularJS","AngularJS with Examples","Form Validation","Jquery Email Validation","Validation Examples"],"articleSection":["AngularJS with Examples"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jharaphula.com\/angularjs-form-validation-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/","url":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/","name":"AngularJS Form Validation (Required, Email, Number & Date) Examples","isPartOf":{"@id":"https:\/\/jharaphula.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage"},"image":{"@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg","datePublished":"2016-05-15T14:41:02+00:00","dateModified":"2022-09-04T13:19:54+00:00","description":"Validation is the way using which we can prevent spam entries. In this demo I created AngularJS Form Validation for Required filed, date, email & number.","breadcrumb":{"@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jharaphula.com\/angularjs-form-validation-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#primaryimage","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/validation.jpg","width":750,"height":467,"caption":"AngularJS Form Validation (Required, Email, Number & Date) Examples"},{"@type":"BreadcrumbList","@id":"https:\/\/jharaphula.com\/angularjs-form-validation-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jharaphula.com\/"},{"@type":"ListItem","position":2,"name":"AngularJS Form Validation (Required, Email, Number & Date) Examples"}]},{"@type":"WebSite","@id":"https:\/\/jharaphula.com\/#website","url":"https:\/\/jharaphula.com\/","name":"OneStop Shop","description":"Blog for SEO Guest Posting, Digital Marketing or Home Remedies","publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jharaphula.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jharaphula.com\/#organization","name":"OneStop Shop","url":"https:\/\/jharaphula.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","width":409,"height":91,"caption":"OneStop Shop"},"image":{"@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tajinweb","https:\/\/x.com\/guestpostingopp"]},{"@type":"Person","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3","name":"Nibedita Panda","description":"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.","sameAs":["https:\/\/jharaphula.com"],"url":"https:\/\/jharaphula.com\/author\/nibeditap\/"}]}},"_links":{"self":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/comments?post=1549"}],"version-history":[{"count":0,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1549\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media\/1918"}],"wp:attachment":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media?parent=1549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/categories?post=1549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/tags?post=1549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}