如何验证输入类型文本字段作为输入类型时间

Question

I want to validate the text field as a time input. in the text field, I want to show hours and minutes like this. ex: 12:25

I am already trying some codes.

 function changetrigger(inputField){ var isValid = /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(inputField.value); if (isValid) { console.log('Success'); } else { console.log('Unsuccess'); } return isValid; };

 <div class="col-md-2 col-sm-6 col-6"> <div>Starting Time</div> <input type="text" onchange="changetrigger(this);" id="morning" ng-model="main.morning_r" placeholder="00:00"> </div>

When I run this code error occurred in the console. "changetrigger is not defined".

I am new to code. can u help me to fix this or another way to do this validation?

Answer 1

To validate hours/minutes, you can use regex like:

^([01]?[0-9]|2[0-3]):[0-5][0-9]$

//If you're going to allow one digit in the minutes go with:
^([01]?[0-9]|2[0-3]):([0-5][0-9]|[0-9])$

It will be better to attach the event in your code like the sample below.

NOTE: Using the input event is the most efficient way to track the user inputs.

 function changetrigger() { var isValid = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$$/.test(this.value); if (isValid) { console.log('Success'); } else { console.log('Unsuccess'); } return isValid; }; document.getElementById('morning').addEventListener('input', changetrigger);

 <div class="col-md-2 col-sm-6 col-6"> <div>Starting Time</div> <input type="text" id="morning" ng-model="main.morning_r" placeholder="00:00"> </div>

Answer 2

ng-model in your HTML suggests that you are using AngularJS then why not you use ng-keyup / ng-change and declare a scope function in controller? It is better to use this all in angular way.

//Example
$scope.changetrigger = function() {
     // your logic here
}

Another option is using ng-pattern that can be used with regex.

JAVASCRIPT way:

Please Note: If you are trying to mix Javascript with AngularJS then do > not forget to put below changetrigger function inside HTML file's head/script tag OR before the input field so that it initialize before DOM becomes ready. Primafacie, it looks like you have declared that function in controller class and in result it is not defined or the function is declared after the element in HTML file

1- I used onkeyup instead of onchange (for demo)

2- I do also change your regex to /\d{2}:\d{2}/

 function changetrigger(inputField){ var isValid = /\d{2}:\d{2}/.test(inputField.value); if (isValid) { console.log('Success'); } else { console.log('Unsuccess'); } return isValid; };

 <div class="col-md-2 col-sm-6 col-6"> <div>Starting Time</div> <input type="text" onkeyup="changetrigger(this);" id="morning" placeholder="00:00"> </div>

Answer 3

Check this (remeber to include jquery with this)

Jquery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> 
</script>

 $('.inputField').on('change', function(){ var isValid = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$$/.test($('.inputField').val()); if (isValid) { console.log('Success'); } else { console.log('Unsuccess'); } return isValid; })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-2 col-sm-6 col-6"> <div>Starting Time</div> <input type="text" class="inputField" id="morning" ng-model="main.morning_r" placeholder="00:00"> </div>

This will eliminate the problem of the function "not being defined".