| home | AJAX (9) || C#.NET (7) || Coldfusion Development (16) || DHTML (16) || Flash Development (20) || jQuery (9) || MSSQL (2) || UNIX (11) |
| 12.1.06 | Simple JavaScript Form Field onKeyDown Regular Expression Wrapper |
UPDATED —-
This is the final version I’ve been using in the live environment - streamlined and simple for use in windows, mac - IE, FireFox, Safari.
Download this code: new_validation.js
OLD WAY OF DOING THINGS —-
A simple method of data entry consistency is to prevent the end-user from entering in invalid characters in a specific form field. A great deal of expense can be saved by performing this all within JavaScript on the client’s machine - as has been proven and been accepted practice for years. I’ve been finding restricting the characters on a specific form field as the user hits every key a more accepted practice; i.e. It’s all over the place.
This restricting characters method is also supported functionality on a TextField datatype in Flash. Since all the work as of late has been with building RIA’s in both AJAX and Flash, I attempt to take the best feature set for a specific “widget” of the application and duplicate it in the other format. Case in point, duplicating the TextField.restrict functionality within the browser.
Here’s a very simple function to capture each onKeyDown event from an input of type=text. It will check the individual key press against the supplied RegEx in the arguments. It will also ignore control characters as follows:
And the code:
<script>
function reKeyPress(event, keyRE) {
var strr = "";
for(var i in event) {
strr += "\n" + i + " - " + event[i];
}
document.testing.eventBox.value = strr;
document.testing.cCodePress.value = event.charCode;
document.testing.kCodePress.value = event.keyCode;
if ( ( typeof(event.keyCode) != 'undefined' && event.keyCode > 0 && String.fromCharCode(event.keyCode).search(keyRE) != (-1) ) ||
( typeof(event.charCode) != 'undefined' && event.charCode > 0 && String.fromCharCode(event.charCode).search(keyRE) != (-1) ) ||
( typeof(event.charCode) != 'undefined' && event.charCode != event.keyCode && typeof(event.keyCode) != 'undefined' && event.keyCode.toString().search(/^(8|9|13|45|46|35|36|37|39)$/) != (-1) ) ||
( typeof(event.charCode) != 'undefined' && event.charCode == event.keyCode && typeof(event.keyCode) != 'undefined' && event.keyCode.toString().search(/^(8|9|13)$/) != (-1) ) ) {
document.testing.pressValid.value = 'true';
return true;
} else {
document.testing.pressValid.value = 'false';
return false;
}
}
function keyDownHandler(event) {
document.testing.cCodeDown.value = event.charCode;
document.testing.kCodeDown.value = event.keyCode;
}
</script>
</head>
<form name="testing">
north american 10digit phone number: <input type="text" size=10 maxlength=10 onKeyPress="return reKeyPress(event, /[0-9]/);" onKeyDown="keyDownHandler(event);">
<table>
<tr>
<td colspan=3>
<textarea cols=50 rows=20 name="eventBox"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>onKeyPress</td>
<td>onKeyDown</td>
</tr>
<tr>
<td>charCode</td>
<td><input type="text" size=10 maxlength=10 name="cCodePress" value=""></td>
<td><input type="text" size=10 maxlength=10 name="cCodeDown" value=""></td>
</tr>
<tr>
<td>keyCode</td>
<td><input type="text" size=10 maxlength=10 name="kCodePress" value=""></td>
<td><input type="text" size=10 maxlength=10 name="kCodeDown" value=""></td>
</tr>
<tr>
<td>passes?</td>
<td><input type="text" size=10 maxlength=10 name="pressValid" value=""></td>
<td><input type="text" size=10 maxlength=10 name="downValid" value=""></td>
</tr>
</table>
</form>
Download this code: phone_validation.html
its gr8!!! |
||
| #319 40chars | ||
So, how would you allow for using this with names which may have “-” , ” ‘ “, or even spaces. IE “Jim Bob” “Bo-Peep” or “O’Brian”? |
||
| #402 130chars | ||
for the “-”, ” ” and “‘” characters you simply need to change the 2nd argument in the reKeyPress function. This argument is a javascript regular expression, hence the “/” delimiters, and it checks the regular expression supplied against each character entered… not the entire value of the text input field. Here’s how I’d change the regular expression keyRE argument to support the ['- ] characters: onKeyPress="return reKeyPress(event, /[a-zA-Z0-9 '-]/);" |
||
| #406 475chars | ||
Thank you ! That’s very useful. But I always laugh when I read things like : |
||
| #414 181chars |
