Hi all, I find the default javascript validators for integer, double, and decimal SQLFORM fields to be a little annoying. Consider the following surprising behaviors:
- You can't navigate within the textbox using the keyboard. Pressing left, right, home, or end all result in the cursor jumping back to the end of the input - You can't select text with ctrl-a or ctrl-shift-left/right - If the user accidentally flubs the input (e.g. 2.u1828 instead of 2.71828), the offending character is silently removed and an incorrect value may be submitted without warning. I think a better alternative is to flag to the user that the input is wrong rather than trying to correct it for them -- e.g. by changing the input background color. The following is a sample implementation that does this: -- in file web2py_ajax.html, replace the lines "jQuery('input.integer').live..." and "jQuery('input.double,input.decimal').live..." with: jQuery('input.integer').live('keydown keyup', function(){ if (! this.value.match(/^[+-]?[0-9]*$/)) { jQuery(this).addClass("w2p_inputerror"); } else { jQuery(this).removeClass("w2p_inputerror"); } }); jQuery('input.double,input.decimal').live('keydown keyup', function(){ if (! this.value.match(/^[+-]?[0-9]*\.?[0-9]*$/)) { jQuery(this).addClass("w2p_inputerror"); } else { jQuery(this).removeClass("w2p_inputerror"); } }); -- in file base.css, add the following style: input.w2p_inputerror { background: #FF8; } A few notes: 1. The regexes used to validate numbers are "intentionally" naive. For example. the double validator accepts "+", "-", "+.", and "-.", which are of couse not valid numbers. However, suppose the user enters a value between -1 and 0. They are likely to start by typing "-.", and I don't think it's polite to flash the textbox at them when they are about to enter a valid number. 2. The double validator does not permit scientific notation - e.g. "1e6" for 1 million. Such notation is probably of limited use for most people, the old validator rejected such values anyway, and I didn't feel like implementing it :-) 3. The jquery events listen to both keyup and keydown. keyup is necessary because the input.value has not yet been updated when keydown is fired. But listening to keydown is useful if the user holds down the backspace key - the background color will be reset as soon as the last offending character has been deleted, rather than waiting for the user to release the backspace key. 4. I used the class name "w2p_inputerror" in an attept to namespace this somewhat web2py-specific class. I hope some people find this to be useful. If other people have been annoyed by the current default, perhaps we could open discussion to make this the new default in web2py? Cheers, Kevin