AngularJS, issue on form validation -


i have form user needs enter 2 times email. found on internet (but not able find link anymore) angular code doing wanted. issue when 2 emails same, 1 input still got class

.ng-invalid.ng-dirty

so can't submit form.

my code following:

css:

.ng-invalid.ng-dirty{     border-color: #fa787e; }  .ng-valid.ng-dirty{     border-color: #78fa89; } 

html:

 <div ng-app="myapp">       <form name="formtemplate" novalidate>         <input id="email1" type="email" ng-model="currentform.email1" name="email1" required>         <span ng-show="formtemplate.email1.$error.required && formtemplate.email1.$dirty">required</span>         <span ng-show="!formtemplate.email1.$error.required && formtemplate.email1.$error.email1 && formtemplate.email1.$dirty">invalid email</span>           <input id="email2" type="email" name="email2" ng-model="currentform.email2" same-email required>         <span ng-show="formtemplate.email2.$error.required && formtemplate.email2.$dirty">please confirm email.</span>         <span ng-show="!formtemplate.email2.$error.required && formtemplate.email2.$error.nomatch && formtemplate.email1.$dirty">emails not match.</span>       </form>     </div> 

javascript:

var app = angular.module('myapp', ['uservalidation']);  angular.module('uservalidation', []).directive('sameemail', function () {     return {         require: 'ngmodel',         link: function (scope, elm, attrs, ctrl) {             ctrl.$parsers.unshift(function (viewvalue, $scope) {                 var nomatch = viewvalue != scope.formtemplate.email1.$viewvalue;                 ctrl.$setvalidity('nomatch', !nomatch)             })         }     } }) 

here jsfiddle: http://jsfiddle.net/malamine_kebe/pq6fw04v/

im update jsfiddle. don't return value ctrl.$parsers.unshift.

ctrl.$parsers.unshift(function (viewvalue, $scope) {             var nomatch = viewvalue != scope.formtemplate.email1.$viewvalue;             ctrl.$setvalidity('nomatch', !nomatch);             return nomatch;         }) 

updated jsfiddle


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -