JavaScript / jQuery Real-time Validation

Question

I have a simple implementation of some “real-time validation” for input. Allowed characters have lower and upper letter, 0-9, hyphens, period, apostrophe and spaces. The field is limited to 15 characters. I use jQuery here just for ease of use in my example, it may or may not be used for my project.

Currently, when you try to position / move the cursor inside the input using the arrow keys, I always get to the end of the line. The same thing happens when you try to select all the text using the keys (CTRL-A). Is there a better way to achieve what I'm looking to avoid this? It seems to me that I have a bad user interface.

$( '#sample' ).on( 'keyup', function( event ) { var str = $( this ).val(); str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0,15); $( this ).val( str ); });​ 

I also have jsFiddle configured here

Answer 1

Most problems can be prevented by simply updating the input value only if it really changes.

 $( '#sample' ).on( 'keyup', function( event ) { var str = $( this ).val(); str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0,15); if($( this ).val() != str) { $( this ).val( str ); } });​ 

To allow the removal of characters from the middle of the text, you must remember and reset the position of the carriage. To do this, you can use the following functions:

 $.fn.getCaretPosition = function() { var el = $(this).get(0); var pos = 0; if ('selectionStart' in el) { pos = el.selectionStart - 1; } else if ('selection' in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart('character', -el.value.length); pos = Sel.text.length - SelLength; } return pos; } $.fn.setCaretPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }​ 

And expand your keyboard handler:

 $('#sample').on('keyup', function(event) { var str = $(this).val(); str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0, 15); if ($(this).val() != str) { var pos = $(this).getCaretPosition(); $(this).val(str); $(this).setCaretPosition(pos); } }); 

See the updated FIDDLE .

Answer 2

since you are listening to the keyup event, the function will execute when any key is up, including CTRL + C, arrows. so instead you can use .on ('input', foo ()), which will only be executed when the text changes.

 $( '#sample' ).on('input',function( event ) { var str = $( this ).val(); str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0,15); $( this ).val( str ); });​ 

Answer 3

Use default limit for special characters such as

 $( '#sample' ).on( 'keypress', function( event ) { var ch = String.fromCharCode(event.keyCode); ch = ch.replace(/[^A-Za-z-0-9.'\s]/g, ""); if(ch == "") { event.preventDefault(); } });​ 

http://jsfiddle.net/sjTUw/34/