How can I restrict validation to trigger only when a field loses focus?

Question

How can I restrict validation to trigger only when a field loses focus?

Is there a way to validate the input tag for time format 00:00:00 after exiting the field, rather than during user typing? Any suggestions on how to accomplish 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>

javascript angularjs validation angularjs-directive

Answer 1

Answer №1

To achieve the desired outcome, utilize ng-blur which is a pre-built functionality in AngularJS: 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 - included JS code as per OP's request: To bind error messages to your span element, implement the following JavaScript:

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

Answer 2

To achieve the desired outcome, utilize ng-blur which is a pre-built functionality in AngularJS: 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 - included JS code as per OP's request: To bind error messages to your span element, implement the following JavaScript:

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

Answer 3

Answer №2

I approached this problem with a unique solution, utilizing a custom directive to maintain a DRY codebase. Here is the code snippet I used:

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);
                    }
                });
            });
        }
    };
});

To implement this 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>

This solution was inspired by the following plnkr example: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview

Answer 4

I approached this problem with a unique solution, utilizing a custom directive to maintain a DRY codebase. Here is the code snippet I used:

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);
                    }
                });
            });
        }
    };
});

To implement this 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>

This solution was inspired by the following plnkr example: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview

How can I restrict validation to trigger only when a field loses focus?

Answer №1

Answer №2

Similar questions

Adjust the font size based on the dimensions of the container

Comparing non-blocking setTimeout in JavaScript versus sleep in Ruby

Organizer featuring Outlook-inspired capabilities

connecting elements in an object's array to another array within a nested object

What is the best way to incorporate a JavaScript file into my ejs file using node.js?

Adding elements from one array to another array of a different type while also including an additional element (JavaScript/TypeScript)

Show or hide a div through two variables that toggle between different states

What is the process for running a script during partial view rendering?

What is the best way to incorporate a rectangle or arrow into my canvas design?

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

Encountering Rendering Issues with EJS Post HTML Conversion

Easily transition the header's height when selecting a menu item

What is causing the React text component to fail to show changes made to my array state?

Leveraging ngCordova in a Cordova Application

Dividing a sentence by spaces to isolate individual words

Jesting around with mocking console.error leads to test failures

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Performing an Ajax post request to a PHP script in order to retrieve a PHP variable using XMLHttpRequest

When transitioning in Vue, pagination bullets shift to the left upon changing routes

An expected expression was encountered near the if condition