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!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.