• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 767
  • Last Modified:

Mootools: How to validate time on input field in form?

I have a form that takes times in text field inputs in 24-hour format.  

I want to be able to validate the contents of these inputs to ensure that they are usable i.e. from 00:00-23:59 and no different.

The page uses the Mootools framework, and so I need to be able to deploy this validation using Mootools - I've taken a look at the default Form.Validator (http://mootools.net/docs/more/Forms/Form.Validator) but this has date format validation but nothing to do with time (I need to check the ':' is used too.)

Thanks
0
freestate
Asked:
freestate
  • 3
  • 3
1 Solution
 
marceloOrigoniCommented:
This is a code I wrote some time ago:
                input = $('[idOfYourInput']);
            input.setProperty('maxlength', 5);
            input.addEvent('keydown', function(event){
                  length = this.getProperty('value').length;
                  return isNumberKey(event, length);
                  });
            input.addEvent('keyup', function(event){
                  code = event.code;
                  key = event.key;
                  if((code > 47 && code < 58) || (code > 95 && code < 106)){
                        limit = 23;
                        
                        input.setStyle('color', '#444444');
                        length = this.getProperty('value').length;
                                                
                        if(length != 2 && length != 5){
                              hoursError = false;
                              }
                              
                        if(length == 2){
                              text = this.getProperty('value');
                              if(text.toInt() > limit){
                                    input.setStyle('color', '#ff0000');
                                    hoursError = true;
                              }else{
                                    hoursError = false;
                              }
                        
                              if(hoursError == false){
                                    this.setProperty('value',text + ":");
                              }
                        }
                        if(length == 5){
                              hs = this.getProperty('value').split(":")[0];
                              min = this.getProperty('value').split(":")[1];
                              if(hs.toInt() > limit || hs.toInt() < 0){
                                    input.setStyle('color', '#ff0000');
                                    hoursError = true;
                              }else{
                                    hoursError = false;
                              }
                              if(min.toInt() > 59 || min.toInt() < 0){
                                    input.setStyle('color', '#ff0000');
                                    hoursError = true;
                              }else{
                                    if(!hoursError){
                                          hoursError = false;
                                    }
                              }
                        }
                  }
            });
            
function isNumberKey(event, length) {
        var code = event.code;
            if(code == 8 || code == 9 || code == 37 || code == 39 ){
                  return true;            
            }
        if ((code > 47 && code < 58) || (code > 95 && code < 106)){
                  if(length != 2 && length != 5){
                        return true;
                  }
                  else{
                        if(hoursError){
                              return false;
                        }
                        else{
                              return true;
                        }
                  }
            }
            else{
                  return false;
            }
    }      

 It will validate the format, while you are typing, and on submit, you can check the hoursError variable, to see if there is any error.

 Marcelo
0
 
freestateAuthor Commented:
Hi,

Sorry - could you give a simple example of how to deploy this? i.e. I have:

<input type="text" name="reception_time" id="reception_time" /> as one of the fields that needs checking...

Thanks!
0
 
marceloOrigoniCommented:
I made something quickly:

<html>
<head>
            <script type="text/javascript" src="./js/mootools.yc.js"></script>
<script type="text/javascript">
            var hoursError = true;
            window.addEvent('domready', function(){
                  input = $('reception_time');
                  form = $('form');
                  form.addEvent('submit', function(e){
                        if(hoursError){
                              alert('Time Format should be HH:MM');
                              return false;
                        }else{
                              return true;
                        }
                  });
            input.setProperty('maxlength', 5);
            input.addEvent('keydown', function(event){
                  length = this.getProperty('value').length;
                  return isNumberKey(event, length);
                  });
            input.addEvent('keyup', function(event){
                  code = event.code;
                  key = event.key;
                  if((code > 47 && code < 58) || (code > 95 && code < 106)){
                        limit = 23;
                       
                        input.setStyle('color', '#444444');
                        length = this.getProperty('value').length;
                                               
                        if(length != 2 && length != 5){
                              hoursError = false;
                              }
                             
                        if(length == 2){
                              text = this.getProperty('value');
                              if(text.toInt() > limit){
                                    input.setStyle('color', '#ff0000');
                                    hoursError = true;
                              }else{
                                    hoursError = false;
                              }
                       
                              if(hoursError == false){
                                    this.setProperty('value',text + ":");
                              }
                        }
                        if(length == 5){
                              hs = this.getProperty('value').split(":")[0];
                              min = this.getProperty('value').split(":")[1];
                              if(hs.toInt() > limit || hs.toInt() < 0){
                                    input.setStyle('color', '#ff0000');
                                    hoursError = true;
                              }else{
                                    hoursError = false;
                              }
                              if(min.toInt() > 59 || min.toInt() < 0){
                                    input.setStyle('color', '#ff0000');
                                    hoursError = true;
                              }else{
                                    if(!hoursError){
                                          hoursError = false;
                                    }
                              }
                        }
                  }
            });
                  
            });
function isNumberKey(event, length) {
        var code = event.code;
            if(code == 8 || code == 9 || code == 37 || code == 39 ){
                  return true;            
            }
        if ((code > 47 && code < 58) || (code > 95 && code < 106)){
                  if(length != 2 && length != 5){
                        return true;
                  }
                  else{
                        if(hoursError){
                              return false;
                        }
                        else{
                              return true;
                        }
                  }
            }
            else{
                  return false;
            }
    }      
</script>
            </head>
<body>            
      <form id="form" method="GET" action="form.html" >
            <input type="text" name="reception_time" id="reception_time" />
            <input type="submit" name="submit" id="submit" value="Go!" />
      </form>
</body>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Aaron TomoskySD-WAN SimplifiedCommented:
A regex is much simpler and faster.
http://mobile.experts-exchange.com/Q_22953566.html
0
 
freestateAuthor Commented:
Good point...

Had to google a 24 hour clock regex, so here's the modified version of the code on that page for anyone who needs it:

0
 
freestateAuthor Commented:
<html>
<head>
<title>Time Check</title>
<script language = "javascript">
<!--
function validateDate(){
   var RegEx = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/;

   if(!document.form1.fieldToValidate.value.match(RegEx)){
      alert("Invalid time.");
      return false;
   }
   alert ("OK!");
   return true;
}
-->
</script>
</head>
<body>
<form name="form1">
<input type = "text" name = "fieldToValidate" value = "">
<input type = "button" value = "Validate" onclick = "validateDate()">
</form
</body>

Open in new window

0
 
marceloOrigoniCommented:
That code is wrong, it will allow to input number between 24:00 and 24:59

this is thw corrent regex
 var RegEx = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])(:[0-5][0-9])?$/;
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now