Skip to main content

Added HTML5 Validation to the on-screen keyboard

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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();

}

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!