Validation using custom directive with angularjs - angularjs

Question

I have a form with input fields and have a custom directive for each input field to validate the data entered by user.Requirement is that when user leaves the input field with invalid data, error message to be displayed.However, few of the fields are optional that if User skips with out entering any data for these fields, no Validation is required.
I tried to implement this using Blur event in the directive, but this is causing the vaidation called even in case of no data entered.
Please advise if Watch function can be used here and any sample snippet here would be appreciated. I have written code in a fiddle which is similar to my directive for one of the input field that checks minimum length (although there is a built-in directive, taken this as an example).This fiddle can be accessed at http://jsfiddle.net/4xbv0tgL/49/
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
Num1: <input type="text" ng-model="num1" my-min-length="5" name="num1" />
<span class="error" ng-hide="myForm.num1.$valid"
ng-show="myForm.num1.$error">Invalid Number!</span>
<br />
Num2: <input type="text" ng-model="num2" my-min-length="5" name="num2" />
<span class="error" ng-hide="myForm.num2.$valid"
ng-show="myForm.num2.$error">Invalid Number!</span>
</form>
</div>
var myApp = angular.module("myApp", []);
var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
$scope.num1 = "12345";
$scope.num2 = "55555";
}]);
myApp.directive("myMinLength", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, element, attr, ngModelCtrl) {
var minlength = Number(attr.myMinLength);
var inputparse = function (inputtext) {
if ((inputtext.length >= minlength) && (!isNaN(inputtext))) {
return inputtext;
}
return undefined;
}
ngModelCtrl.$parsers.push(inputparse);
element.bind("blur", function () {
var value = inputparse(element.val());
var isValid = !!value;
if (isValid) {
ngModelCtrl.$setViewValue(value);
ngModelCtrl.$render();
}
ngModelCtrl.$setValidity("myMinLength", isValid);
scope.$apply();
}
);
}
};
});

Answer 1

I think you are over complicating life for yourself. Why don't you just use multiple directives for multiple checks?
<div ng-app="myApp"
ng-controller="myCtrl">
<form name="myForm"
novalidate>
Num1:
<input type="text"
ng-model="num1"
ng-minlength="5"
integer
name="num1"
required/>
<span class="error"
ng-show="myForm.num1.$invalid&&myForm.num1.$touched">Invalid Number!</span>
</form>
</div>
And here's the integer directive:
var INTEGER_REGEXP = /^[0-9]*$/;
myApp.directive('integer', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (viewValue === "") {
ctrl.$setValidity('integer', true);
return viewValue;
} else if (INTEGER_REGEXP.test(viewValue)) {
ctrl.$setValidity('integer', true);
return viewValue;
} else {
ctrl.$setValidity('integer', false);
return viewValue;
}
});
}
};
});
Just be sure that you are using angular 1.3 or a newer version. Because $touched and $untouched don't exist in 1.2.