ng:validator - $parsers.unshift

AngularJS form validator and TwitterBootstrap 3.0 with $parsers.unshift

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="formValidator">
    <div ng-controller="formWrapper">
        <form action="" name="formToBeValidate" ng-submit="submit()">
 
           <validation-error>
            <div class="form-group">
                <label class="control-label" for="formElement">Name</label>
                <input class="form-control" name="name" type="text" ng-pattern='^[a-zA-Z ]*$' ng-model="name" val="" validation-error="name == undefined  ? 'Passwords don\'t match' : 'khgfdjhgf'"  />
                {{valdata.name}}
            </div>
            
              <div class="form-group">
                <label class="control-label" for="formElement">Mobile</label>
                <input class="form-control" name="mobile" type="text" ng-pattern='^([6-9][0-9]{9})*$'  val="" ng-model="mobile" />
                 {{valdata.mobile}}
            </div>
            
            <div class="form-group">
                <label class="control-label" for="formElement">Website </label>
                <input class="form-control" name="website" type="text" ng-pattern='(^(https://www.|www.|https://|http://www.|www.|http://)+[a-zA-Z0-9][a-zA-Z0-9-]*.[a-z]{2,3}.[a-z/]{2,4}$)|(^(https://www.|www.|https://|http://www.|www.|http://)+[a-zA-Z0-9][a-zA-Z0-9-]*.[a-z/]{2,4}$)'  val="" ng-model="website" />
                 {{valdata.website}}
            </div>
            </validation-error>
        </form>
       <center>
         <button >
          Submit
        </button>
       </center> 
   
    </div>
</div>

CSS

.form-group .ng-valid {
    border-color: #3c763d;
}
.form-group .ng-invalid {
    border-color: #a94442;
}

JavaScript

angular.module('formValidator', [])
  
    .directive('val', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
      var patt = new RegExp(attrs.ngPattern);
           ngModel.$parsers.unshift(
                function (viewValue) {
                var patt =new RegExp(attrs.ngPattern);
                scope.valdata ={};
                if (!patt.test(viewValue)) {
                         element.css("border", "1px solid red");
                         scope.valdata[attrs.name] = attrs.name + "must be in correct format";
                        } else {
                        scope.valdata[attrs.name]=" ";
                            element.css("border", "1px solid green");
                        }
                }
            );
        }
    };
})

.directive('validationError', function () {
    return {
        restrict: 'EA',
        /* require: 'ngModel', */
        scope: {
        name:'=ngModel'        
        },

        link: function (scope, elem, attrs, ctrl) {
            scope.$watch(attrs['validationError'], function (errMsg) {
             console.log('=================errMsg=============',errMsg,elem[0].checkValidity);
                if (elem[0] && elem[0].checkValidity) { // HTML5 validation
                debugger;
if (!elem[0].checkValidity()) {

        elem[0].setCustomValidity("ERROR!");
    } else {
        elem[0].setCustomValidity("");

    }                 }
                if (ctrl) { // AngularJS validation
                    ctrl.$setValidity('validationError', errMsg ? false : true);
                }
            });
        }
    }
})

.controller('formWrapper', function($scope) {
   /*  $scope.elementModelName = 1; */
   $scope.submit = function(){
     alert('Form Submitted successfully.');
   }
});