Added HTML5 Validation to the on-screen keyboard

Sam Deering

A while ago I uploaded a demo (enhancements of the jQuery on-screen keyboard). Since I have added support for HTML5 form validation. In the write function it basically checks the inputs for HTML5 validation rules to determine output write. This is the gist of it:

See Keyboard Demo See Keyboard Demo

write: function(m) {

    var $el = jsKeyboard.currentElement,
        val = $el.val(),
        charStr = String.fromCharCode(m),
        pos = jsKeyboard.currentElementCursorPosition,
        output = [val.slice(0, pos), charStr, val.slice(pos)].join(''),
        doWrite = true;

    //max length - html5: maxlength="x"
    if ($el.attr('maxlength'))
    {
        doWrite = (output.length <= $el.attr('maxlength'));
    }

    //allow numbers only - html5: number attribute
    if (doWrite && $el.hasAttr('datatype'))
    {
        if ($el.attr('number'))
        {
            doWrite = !isNaN(charStr);
        }
    }

    //more HTML5 validation rules here...

   

    //if passed validation do it.
    if (doWrite)
    {
        $el.val(output);
        jsKeyboard.currentElementCursorPosition++; //+1 cursor
    }
    jsKeyboard.updateCursor();

}

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.