AngularJS 1.2.x Validation of forms on blur events

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Worldasdasd';
  $scope.connectionObj = {
    connectionname: ''
  }
  
  $scope.$validateElement = function () {
    return true;
  };
});


app.directive('formInput', function($compile) {
  var setupDom = function(element) {
    var input = element.querySelector("input, textarea, select");
    var type = input.getAttribute("type");
    var name = input.getAttribute("name");
    if (type !== "radio" && type !== "checkbox") {
      input.classList.add("form-control", "fullWidth");
    }

    var label = element.querySelector("label");
    label.classList.add("errorCheck");
    return name;
  };

  var addBlurHandler = function(element, $compile, scope, form, name) {
    element.find("input").attr("data-ng-blur", "onBlurEvent('" + form.$name + "','" + name + "');");
  };

  var addMessages = function(form, element, name, $compile, scope, errorMsg) {
    var message = "<div class='row'>" +
    /*"<div class='col-md-15'>" +*/
    "<label data-ng-show='" + form.$name + "." + name + ".$dirty && " + form.$name + "." + name + ".$error.required" + "' class='errorCheck error-highlight'>" + errorMsg + "</label>" +
    /*"</div>" +*/
    "</div>";
    //angular.element(element.children()[1]).append($compile(message)(scope));

    angular.element(element.children()[1]).append(message);
    $compile(element.children())(scope);
  };

  var watchFor = function(form, name) {
    return function() {
      if (name && form[name]) {
        return form[name].$dirty && form[name].$invalid;
      }
    }
  };

  var updateFor = function(element) {
    return function(hasError) {
      if (hasError) {
        angular.element(element).find("label").addClass("error-highlight");
        angular.element(element).find("input").addClass("error-highlight");
        angular.element(element).find("textarea").addClass("error-highlight");
        angular.element(element).find("select").addClass("error-highlight");
      } else {
        angular.element(element).find("label").removeClass("error-highlight");
        angular.element(element).find("input").removeClass("error-highlight");
        angular.element(element).find("textarea").removeClass("error-highlight");
        angular.element(element).find("select").removeClass("error-highlight");
      }
    }
  };

  var link = function($compile) {
    return function(scope, element, attributes, form) {

      var initialize = function() {
        var name = setupDom(element[0]);
        var errorMsg = attributes.errorMessage;
        addBlurHandler(element, $compile, scope, form, name);
        addMessages(form, element, name, $compile, scope, errorMsg);
        scope.$watch(watchFor(form, name), updateFor(element));

      };

      initialize();

      scope.onBlurEvent = function(form, name) {
        console.log("--------------- Onblur events clickedddd");
        var formElement = scope[form][name];
        if (formElement.$pristine) {
          formElement.$setViewValue(formElement.$viewValue);
          return;
        }
        if(angular.isFunction(scope.$validateElement) && !scope.$validateElement()) {
          formElement.$setValidity("invalid", false);
        }
      };
    };
  };


  return {
    restrict: "A",
    require: "^form",
    link: link($compile),
    
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <form name="vcnsConfigForm" novalidate>
    <div class="row" form-input error-message="An error message has occurred">
      <div class="col-md-6">
        <label>Connection Name</label>
      </div>
      <div class="col-md-9">
        <div class="row">
          <input id="connectionName" name="connectionName" dcss-pattern-mask="^[\w]*$" data-ng-model="connectionObj.connectionname" required data-ng-blur="validateConnectionName();" maxlength="128">
        </div>
      </div>
    </div>
  </form>
  <div class="row">
    <pre>{{ vcnsConfigForm.connectionName.$error | json }}</pre>
  </div>
  <div class="row">
    <pre>
         Invalid : {{ vcnsConfigForm.connectionName.$invalid }}
         Dirty : {{  vcnsConfigForm.connectionName.$dirty }}
         Pristine : {{  vcnsConfigForm.connectionName.$pristine }}   
    </pre>
  </div>
</body>

</html>

/* Put your css in here */