Solved

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

Posted on 2010-11-26
7
734 Views
Last Modified: 2012-06-21
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
Comment
Question by:freestate
  • 3
  • 3
7 Comments
 
LVL 2

Expert Comment

by:marceloOrigoni
Comment Utility
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
 

Author Comment

by:freestate
Comment Utility
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
 
LVL 2

Expert Comment

by:marceloOrigoni
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 38

Accepted Solution

by:
Aaron Tomosky earned 500 total points
Comment Utility
A regex is much simpler and faster.
http://mobile.experts-exchange.com/Q_22953566.html
0
 

Author Comment

by:freestate
Comment Utility
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
 

Author Comment

by:freestate
Comment Utility
<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
 
LVL 2

Expert Comment

by:marceloOrigoni
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now