Spry Phone Number Validation
I've been working on this project at my day job where I've been asked to use Spry and they've got these requirements for phone numbers where the number needs to be US formatted (i.e. (555) 555-1212) for north-american clients (US and Canada). I'm running into a problem with Spry's textfield validation. This only happens in firefox when using the phone_number format for the textfield widget and with character masking enabled. The code looks like this:
<head>
<script language="javascript" type="text/javascript" src="/project/includes/Spry/includes/SpryDOMUtils.js"></script>
<link rel="stylesheet" href="/project/includes/Spry/widgets/textfieldvalidation/SpryValidationTextField.css" />
<script language="javascript" type="text/javascript" id="spryValidationTextField"
src="/project/includes/Spry/widgets/textfieldvalidation/SpryValidationTextField.js"></script>
</head>
<body>
<form name="testform">
<div>Other <input type="text" name="other" /></div>
<div>Phone <input type="text" name="myphone" id="myphone" /></div>
<div>Other 2 <input type="text" name="other2" /></div>
</form>
<script language="javascript">
new Spry.Widget.ValidationTextField("myphone", "phone_number", { useCharacterMasking:true } );
</script>
</body>
</html>
The project manager noticed that in Firefox, the character masking feature eats the first character, so when you tab into the field and start typing 555 555 1212 when you look up at the end the field has (555) 551-212 and is missing the last digit -- because the first 5 he entered was eaten by the Spry widget. The project manager is really upset about it (even though the client company is standardized on Internet Explorer). But I noticed also that there's more to it -- it seems that when I tab into or out of the field, it adds a ( to the beginning of the field, so if I tab through it a couple times without entering any data, the field ends up with a string of them and then eventually adds the closing parenthesis, like this:
Phone Number:
And then if I start typing without first deleting them all it seems to just not accept any data entry.
It seems strange to me. I know the folks behind Spry are also the Dreamweaver team and Spry isn't their first priority. Still... it seems odd not just that the widget would have this problem, but that nobody else seems to have mentioned it. I've been on google like a cheap dress for the last hour or so and unable to find any mention of it. If anybody else has any more information that would be awesome. I don't think the client is going to pay for me to spend a whole day trying to fix it.
Thanks
Ex.
This order creates problems (can't type in the txt box without first hitting backspace, etc):
var sprytextfield_qappPhone = new Spry.Widget.ValidationTextField("sprytextfield_qappPhone", "phone_number", {hint:"Phone", useCharacterMasking:true, validateOn:["change"]});
This order of things works just fine. (tabbing through multiple times will still create extra "(" characters however):
var sprytextfield_indexPhone = new Spry.Widget.ValidationTextField("sprytextfield_indexPhone", "phone_number", {useCharacterMasking:true, validateOn:["change"], hint:"Phone #"});