static void

Javascript utilities

Core JS Libraries

Ok, these days I use JQuery, but these are my old javascript libraries. Some parts date back to 1996, and evolved over more than 10 years until JQuery started to take over.

mu.js- core stuff mostly for forms: see documentation

mu2.js- viewport operations, selectbox tools, stripeTable and setWait: see documentation.

mufx.js simple effects: Fade; Drag, msgBox, ToolTip, Preview. see documentation.

Encoding

• Utilities to encode html entities and "C" encode (double quotes)

Numeric Only

You can use this with the keydown event (cancelled by preventDefault) or keypress (cancelled by return false). This version allows tab, arrow keys (up increases the number, down lowers it), numeric keypad (96-105, not valid in keypress) and hitting the enter key submits the form.

if (!self.mu) var mu = {}; //create namespace if it doesn't exist
mu.numericOnly = function (e) {
    if (!e) var e = window.event;
    var key = e.which || e.keyCode;
    if(key == 9) return true; //tab
    if(key == 8  || key == 46) return true; //backspace - delete
    if(key == 35 || key == 36) return true; //home - end
    if(key == 13) {
        document.forms[0].submit(); //submit the form
        return false;
    }
    var src;
    if (e.target) src = e.target;
    else if (e.srcElement) src = e.srcElement;
    if (src.nodeType == 3) src = src.parentNode;//Safari bug
    if(key == 38) { //up
		var v = parseInt(src.value, 10) +1;
		src.value = v;
    }
    if (key == 40) {//down
		var v = parseInt(src.value, 10) -1;
		if(v>-1) src.value = v;
       }
    if (key >= 37 && key <= 40) return true; //arrowkeys are okay
    if (key > 47 && key < 58) return true; //0-9
    if (e.type != 'keypress' && key > 95 && key < 106) return true; //0-9 keypad (DO NOT USE if keypress)
	//anything else- invalid
	e.returnValue = false;
	if (e.preventDefault) e.preventDefault();
	return false;
};

Reference: ppk

"Unobtrusive" javascript validation

Here's a script that dynamically attaches events to all input fields with classes of "Mandatory", "Number" and "Date" to validate them. If there is an error it attaches a class of "Error"- otherwise it will format the value.

• dateChange
  The validation tries to be very forgiving to users, and reformats dates to a standard format (which other script can change).
  • Any date delimiter (or none). Reformats the standard delimiter.
  • Enter just day or day/month - reformats with full date (based on today)
  • Adds leading zeroes
  • Adds century for 2-digit year (1900 or 2000). Pivot of 75 years. Only 4 digit years (1000-2200)
  • Shortcut- A single non-numeric character returns today's date (eg full stop)
  • Trims extra characters at end
  • Change culture through Validator.setDateFormat(). You can inject System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern into here.
  • Error is indicated by class only. NB: Unless you use isValid, you can still submit an invalid date.
• numberChange
  A simple script for numbers, which inserts commas to separate thousands (particularly suitable for currencies).
• mandChange
  Field.value == "" or not. This one does selects as well as input/@type=text (doesn't do radio/check or textareas). Obviously if you class Error is color:red, this won't be visible!
• addHandlers
  This is automatically assigned to window load. Looks for inputs with the classes Mandatory, Date and Numeric and assignes the handlers.
• isValid
  Assign this to the form submit - Validator.addEvent(document.forms[0], 'submit', Validator.isValid);
  Prevents submiting if invalid. Generates simple error messages into an UL with id "ErrorList" (creates it as firstchild of the form if undefined). Obviously this just uses the IDs and isn't localized or easily customizable.
  Plays nicely with mu.setWait if used.
• locale
  Date and number localization. Takes en-gb (default), en-us or anything else (for European).
  You can set a custom locale with setDateSeparator, setIsDayMonth (dd/mm or mm/dd), setDecimalPoint, setThouSeparator
  Note the isValid onsubmit function creates error messages and isn't localized.

Calendar-pickers

• http://www.dynarch.com/projects/calendar/. It can be configured and localized very well.
• JQuery calendar (there's an asp control for it). Localization and lots of conifguration.
• Clean calendar. Not localized, not much configuration- but very simple. The basis of the JQuery version. My version (css) shown below is changed for dd/mm/yy, reformats slightly, closes when moving to another field, and has a helper button option. Nearly double the size, but still fairly short.

I've used the dynarch one for several years, but now I mostly use the JQueryUI version. My lightweight version based on the origincal Marc Grabanski one is nice and quick with no dependencies.

Height/Weight Conversion

HWConvert converts metric to Imperial heights and weights (UK version- stones and pounds). It uses the onchange event to update the related fields, and sets the class "Error" if applicable. There's a HWConvert.FieldIDs object that holds the IDs of the fields.

Timesheet

My simple timesheet calculator.