Formatting telephone number in ValidationTextBox.

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Formatting telephone number in ValidationTextBox.

sharath-2
Hi All,
 
I've a form where user enters phone number.

When user enters the primary phone number as say 1234567890, I would like to dynamically format the phone number as 123-456-7890. 
 
How to format this in dojo
 
 

<div>

<input type="text" id="primary_phone_number" name="primary_phone_number"

dojoType="dijit.form.ValidationTextBox"

promptMessage="Enter Primary Phone(xxx-xxx-xxxx)."

size="12"

maxLength="12"

style="width: 120px;"

onblur="validatePrimaryPhone"

regExp="^[0-9]\d{2}-\d{3}-\d{4}$"

invalidmessage="Telephone number format: xxx-xxx-xxxx"

/>

</div>


Thanks in advance.
 
Regards,
Sharath.


_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
[hidden email]
http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Formatting telephone number in ValidationTextBox.

Deno Vichas

You’ll need a custom on onBlur / onChange event to do it.   With the regEx the textbox will think it’s not correct when first enter causing it blink yellow before you custom handler reformats the number.

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of sharath karnati
Sent: Monday, December 08, 2008 3:30 PM
To: [hidden email]
Subject: [Dojo-interest] Formatting telephone number in ValidationTextBox.

 

Hi All,

 

I've a form where user enters phone number.

When user enters the primary phone number as say 1234567890, I would like to dynamically format the phone number as 123-456-7890. 

 

How to format this in dojo

 

 

<div>

<input type="text" id="primary_phone_number" name="primary_phone_number"

dojoType="dijit.form.ValidationTextBox"

promptMessage="Enter Primary Phone(xxx-xxx-xxxx)."

size="12"

maxLength="12"

style="width: 120px;"

onblur="validatePrimaryPhone"

regExp="^[0-9]\d{2}-\d{3}-\d{4}$"

invalidmessage="Telephone number format: xxx-xxx-xxxx"

/>

</div>



Thanks in advance.

 

Regards,

Sharath.

 


_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
[hidden email]
http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Formatting telephone number in ValidationTextBox.

Gregor C Okorn
In reply to this post by sharath-2
I was looking for the same type of solution, and after not finding one I experimented until I created what works for me.  It extends ValidationTextBox, overrides onChange, and uses the "placeHolder" attribute to define the desired format that it then enforces.  Check it out at jsfiddle: http://jsfiddle.net/gregorco/m7fJ9/11/ 

At the moment it has a less than perfect way to consider a phone extension "x###" as optional - so if you see a better one, please improve it.  Thanks.