The JSAction framework allows you to connect a HTML input element with a JavaScript time validation very easy. Therefore you just define a special CSS class in the HTML Code and automatically a realtime validation will be registered for the input element. The code remains absolutly valid.
The CSS class time indicate a input element as time field. You can additional define the element as a required field with required.
<input type="text" name="time1" class="time" />
<input type="text" name="time2" class="time required" />
The following fields check the input in realtime on keystroke (onkeyup) and/or when the focus is lost (onblur). The input can be done with or without separator characters, in the second case the time will be automatically formated when the input field looses its focus.
Time 1:
Time 2: (required)
The layout of the input fields is defined global with CSS selectors.
.time { width:40px }
.required { background-color:rgb(255,255,174) }
You can set the time format country-specific for international applications. The order of hour, minute and second can not be switched. But the time separator is freely selectable. The error message is individual changeable in an suitable language too.
HpResource.timePattern = 'HH:mm';
HpResource.timeSeparator = ':';
HpResource.errorTime = 'Not a valid time!';
You can easily overwrite the default time format with an individual format for a special input field.
class="time HH" (only hour)
class="time mm" (only minute)
class="time ss" (only second)
class="time mmss" (minute and second)
class="time HHmmss" (hour, minute and second)
Author: Johannes HammoudComments Date: 12.11.2009