Added HTML5 Validation to the on-screen keyboard

By 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(); } [/js]



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.