Controls

Validation

All validation functions act on entering a text. An invalid input will be marked with the css class "invalid", if everything is correct it will get the class "valid".

mandatory

at least one non-whitespace character must be in the field

<input class="mandatory" name="name"/>

Note: mandatory can also be mixed with some of the other validation controls.

number

only allows number (can use autoclean to only allow correct input)

<input type="text" class="number"/>

integer

only allows integers - numbers without comma (can use autoclean to only allow correct input)

<input type="text" class="integer"/>

date

you can set the date-format by use the "data-format=''" attribute (java style). Otherwise it uses internationalization.

<input type="text" class="date" data-format="dd.mm y"/>

datetime

<input type="text" class="datetime" />

timespan / duration

This will convert the entered timespan (i.e. 1:10.58) Minute, Seconds millisecnds

<input type="text" class="timespan />

humantime

This will convert the entered duration in muman time into milliseconds (i.1. 5m -> 5 minutes). Note this is not accuratie, depending on the "range" smaller values will be removed(i.e. if you show hours, seconds are ignored)

<input type="text" class="humantime />

regexp

do a regular expression check with the value in "data-regexp=''"

<input type="text" class="regexp" data-regexp="^x[0-9]+$"/>
<input type="text" name="data.url" class="regexp" data-regexp="^https?\://[A-Za-z0-9.]+(:[0-9]+)?/?[^ \s]*$"/>

autoclean

can be used in combination with the above to only allow valid inputs and automatically remove unwanted characters while entering

<input type="text" class="number autoclean"/>
<input type="text" class="regexp autoclean mandatory" data-regexp="[^a-z]"/>

display formatting (field)

When showing data with span/div class="field" you can add following formatting options:

Class	Description	Sample
dateTime	Show as date-time	2.2.2023 12:45
date	Just date	2.2.2023
time	only time	13:22
byte	byte formatting	12T 23G 34M
decimal	decimal (2 post comma)	12.34
percent	percent	12%
timespan	human readable time span	2d 3h
bool	either '' / 'X' or whatever is the data-true/data-false attribute of the value element	X

Special Controls

Rotating State Control

Also available on stackoverflow

The control takes the json array in data-state-values for as many states as you want to rotate through:

value: the value that will be entered in the input
class: css class(es) that the new span will have
title: an optional title that will be set in the created span

It basically creates a element and on click updates it by cacling through the given value list.

It even allows change through other means (i.e. setting the value of the input directly) and updates the "control" when the $("input").change(); event is triggered.

<input type="text" class="rotatestate" value="true"
 data-state-style="cursor:pointer"
 data-state-class="ui-icon"
 data-state-values='[{"value":"true","class":"ui-icon-check","title":"title for true"},{"value":"false","class":"ui-icon-radio-off","title":"title for off"},{"value":"null","class":"ui-icon-cancel","title":"title for third state"}]'/>

Internationalization

Some controls allow internationalization:

• input class="number"
• input class="currency"
• input class="time"
• input class="datetime"

You can specify the format user by setting a i18n data class on the $(document) element (it also works as global variable witht he name 'i18n':

$(function(){
   // set english locale
   $(document).data("i18n", {
     date: {
       "format": "M/d/yy h:mm a",
       "monthsFull":["January","February","March","April","May","June","July","August","September","October","November","December"],
       "monthsShort": ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
       "daysFull": ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
       "daysShort": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
       "timeFormat": "h:mm a",
       "longDateFormat": "EEEE, MMMM d, yyyy",
       "shortDateFormat": "M/d/yy"
     },
     number: {
       "format": "#.##0,###",
       "groupingSeparator": ".",
       "decimalSeparator": ","
     },
     currency: {
       "prefix": "$ ",
       "suffix": "",
       "fractionDigits": 2
     }
   });
});

$(function(){
   // set german locale
   $(document).data("i18n", {
     date: {
       "format": "dd.MM.yy HH:mm",
       "monthsFull":["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
       "monthsShort": ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],
       "daysFull": ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
       "daysShort": ["So","Mo","Di","Mi","Do","Fr","Sa"],
       "timeFormat": "HH:mm",
       "longDateFormat": "EEEE, d. MMMM yyyy",
       "shortDateFormat": "dd.MM.yy"
     },
     number: {
       "format": "#,##0.###",
       "groupingSeparator": ",",
       "decimalSeparator": "."
      },
      currency: {
	 "prefix": "",
	 "suffix": " €",
	 "fractionDigits": 2
      }

   });
});