Validate Time format using Regular Expression and JavaScript in AngularJS

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Oct 29, 2019 11:57 PM
Forum: AngularJS
Answer: 1
Views: 6108
Sample Code: Download

Hi,

I have one textbox

in that i am trying to enter only time innbelow format only

Ex:10:23,19:45

rather than if i try to enter any other format need to display validation message

Could you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script src="../../Scripts/dirPagination.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http) {
            
        })
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-bordered table-responsive">
            <tr>
                <th>Time</th>
            </tr>
            <tbody dir-paginate="m in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                <tr>
                    <td><input type="text" date='HH:mm' ng-model="m.Time" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Oct 30, 2019 02:28 AM
Modified: on Oct 30, 2019 03:30 AM
Report

Hi mahesh213,

Check the below example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Time Validation AngularJS</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [{ Time: '1-1-2019 13:30' },
                                { Time: '2-2-2019 12:24'}]
            for (var i = 0; i < $scope.Customers.length; i++) {
                var isValid = ValidateTime($scope.Customers[i].Time.split(' ')[1]);
                if (!isValid) {
                    $scope.Customers[i].IsValid = false;
                } else {
                    $scope.Customers[i].IsValid = true;
                }
            }
            $scope.Validate = function (inputvalue, index) {
                var isValid = ValidateTime(inputvalue);
                if (!isValid) {
                    $scope.Customers[index].IsValid = false;
                } else {
                    $scope.Customers[index].IsValid = true;
                }
            }

            function ValidateTime(inputvalue) {
                var isValid = /^([0-1][0-9]|2[0-3]):([0-5][0-9])$/.test(inputvalue);
                return isValid;
            }
        });
        app.directive('date', function (dateFilter) {
            return {
                require: 'ngModel',
                link: function (scope, elm, attrs, ctrl) {
                    var dateFormat = attrs['date'] || 'HH:mm';
                    ctrl.$formatters.unshift(function (modelValue) {
                        return dateFilter(dateFilter(new Date(modelValue), dateFormat));
                    });
                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-bordered table-responsive">
            <tr>
                <th>
                    Time
                </th>
            </tr>
            <tbody>
                <tr ng-repeat="m in Customers">
                    <td>
                        <input type="text" date='HH:mm' ng-model="m.Time" ng-keyup="Validate(m.Time,$index)" />
                    </td>
                    <td ng-show="!m.IsValid">
                        <span style="color: Red">Invalid Time!</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo

Validate Time format using Regular Expression and JavaScript in AngularJS

Company

Explore

Follow us

Contact Us