JavaScript
Article

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]

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

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