This small set of scripts should give you a starting point for filtering the valid input to certain form fields to ensure that you shouldn't end up with input that you don't want*.
Basically you'd have the following javascript functions defined:
function isNumber( evt ) {
valid = true;
if( evt.which || ( evt.which != 0 && evt.charCode != 0 ) ) {
var charCode = ( evt.which ) ? evt.which : event.keyCode;
if( charCode > 31 && ( charCode < 48 || charCode > 57 ) ) {
valid = false;
}
}
return valid;
}
function isValidEmailCharacter( evt ) {
valid = true;
if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
var charCode = ( evt.which ) ? evt.which : event.keyCode;
var char = String.fromCharCode( charCode );
var re = new RegExp( /([0-9A-Za-z-_@.])/ );
valid = re.test( char );
}
return valid;
}
function isValidPhoneCharacter( evt ) {
valid = true;
if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
var charCode = ( evt.which ) ? evt.which : event.keyCode;
var char = String.fromCharCode( charCode );
var re = new RegExp( /([0-9+\s\[\]])/ );
valid = re.test( char );
}
return valid;
}
Then we add an onkeypress event to the relevant form fields to filter out any of the keystrokes you don't want. This would look something like:
<input type="text" name="num" onkeypress="return isNumber( event );" /> <input type="text" name="year" maxlength="4" onkeypress="return isNumber( event );" /> <input type="text" name="email" onkeypress="return isValidEmailCharacter( event );" /> <input type="text" name="phone" onkeypress="return isValidPhoneCharacter( event );" />
The only problem with this method of filtering input to the form elements is that key combos using filtered characters will not work, i.e. ⌘+A to select the entire entry in a text field will not work when we're applying the isNumber filter to that field. The solution would be to create a list of key combonations that are allowed.
Not a necessity, but it can't hurt.
- Chris
* That's not to say you shouldn't validate the form when it's submitted, the non-JavaScript action will be to allow anything.