Field validation

In the cms we have a special field called slug for generating readable urls. A slug should be a all lowercase no space only numbers and chars field. To make sure you do not use any illegal characters, we want to filer your input. To do that, we can create a custom filter that delivers just that by adding a keydown filter in js ready on the page. The keydown let you tell the browser not to let keys trough, so for all keys we do not like, we do a preventDefault method. The keycodes is special for Javascript, and do not follow ascii or ansi strictly. The Alt, Ctrl and Shift keys also generates it's own keydown codes. One of the better lists can be found here.

The filter code

$("#slug").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39) ||
            // a-z
            (e.keyCode >= 65 && e.keyCode <=90)
           ) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number or stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && 
           (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
});

This is how the custom field validation is created.

1. Locate page properties and find the js ready tab
2. Add a keydown event handler to the slug field by selecting it using the name found in element properties on field and adding the CSS id selector #.
3. Check for keys you want to let thru and return immediately. We do this for backspace, delete, tab, esc, enter, ctrl+a the cursor and home keys and for a-z in any form.
4. make sure we do not let any other keys thru except for unshifted numbers and numbers on the keypad