How to limit validation on a field when blur fires?

Question

The following code applies validation on a text field (time format 00:00:00) correctly. But I need to validate the input tag after exiting the field, at the moment it validate when a user is typing. Any idea how to solve this?

  <label for="operativeToTime">Operative to time</label>
    <input name="operativeToTime"
           ng-model="deviceDetails.operativeToTime"
           type="text"
           ng-pattern="/^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/"
           ng-required="true">
    <div class="error-container" ng-show="editDeviceForm.operativeToTime.$invalid">
        <span class="error" ng-show="editDeviceForm.operativeToTime.$error.required">Operative to time is required</span>
        <span class="error" ng-show="editDeviceForm.operativeToTime.$invalid">+++++++++++++Wrong format</span>
     </div>

Answer 1

What you want is ng-blur, which comes built in: https://docs.angularjs.org/api/ng/directive/ngBlur

<label for="operativeToTime">Operative to time
    <input name="operativeToTime"
           ng-model="deviceDetails.operativeToTime"
           type="text"
           ng-required="true"
           ng-blur="validateInput(this)"/>
    <div class="error-container" ng-show="editDeviceForm.operativeToTime.$invalid">
        <span class="error" ng-repeat="error in errors" ng-bind="error"></span>
     </div>

Update - added JS according to request from OP: You would need something on these lines to bind the error(s) to your span:

$scope.errors = [];
$scope.validateInput = function(element){
var validate1 = //your logic for validation here
if(!validate1){$scope.errors.push("Error message 1");}
var validate2 = //your logic for validation here
if(!validate2){$scope.errors.push("Error message 2");}
};

Answer 2

I solved it using a different approach, a custom directive. As I had to keep a DRY approach here my code;

---

app.directive('checkTimeOnBlur', function () {
    var EMAIL_REGX = /^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/;
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elm, attr, ctrl) {

            if (attr.type === 'radio' || attr.type === 'checkbox') return;
            elm.unbind('input').unbind('keydown').unbind('change');

            elm.bind('blur', function () {
                scope.$apply(function () {
                    if (EMAIL_REGX.test(elm.val())) {
                        ctrl.$setValidity('time', true);
                    } else {
                        ctrl.$setValidity('time', false);
                    }
                });
            });
        }
    };
});

in the view:

     <input type="text" name="time" ng-model="user.time" check-time-on-blur>
        <span ng-show="editDeviceForm.time.$error.time" class="help-inline">Invalid time!!!</span>

Solution inspirited by this plnkr http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview