Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
kamlesh_chauhankamlesh_chauhan 

Maskedit format for apex:inputtext for phone number

hi,

i want mask in telephone number like this.

(999) 999-9999

 

I have tried with Jquery but not done at all.

 

please suggest me solution

 

Thanks in advance

 

Best Answer chosen by Admin (Salesforce Developers) 
WesNolte__cWesNolte__c

A few things are amiss.

 

1. You need to put all jQuery code in a document.ready function (well not really, but it's convenient and recommended).

2. Instead of using salesforce ids, which change if you move your input tag around in the code, using classes works quite well too. There is a performance loss, but it's not noticable unless you page is very very large. 

3. You don't need to use function calls with jQuery necessarily. You can use the document.ready function to 'attach' event handlers to certain tags.

 

Here's my page (you can ignore my static resource inclusion, my files are slightly different from yours):

 

 

<apex:page >	<apex:includeScript value="{!$Resource.jquery}"/>	<apex:includeScript value="{!$Resource.jMaskedInput}"/>		<script>			$(document).ready(function() {		   // put all your jQuery goodness in here.		   		   $(".txt-mask").mask("(999) 999-9999"); /* I've used classes because it avoids having to deal with tricky salesforce ids */		   		   		 });		</script>	<apex:form id="testform" >            		<apex:inputText id="txtDate" styleClass="txt-mask"/>	 	</apex:form></apex:page>
 
I've tested this and it works very nicely. Welcome to jQuery ;)
 
Wes 
 
 
 
 


All Answers
WesNolte__cWesNolte__c
Hey
 
Not sure what you mean by mask-in. Can you give a bit more info.
 
Wes 


kamlesh_chauhankamlesh_chauhan
Hi,
 
I need a validation on apex page to enter valid phone number in (999) 999-9999 format.
 
I have tried to use JQuery through which it will display the format "(xxx) xxx-xxxx" in the text box. but it is not working.
 
Please give suggetion or idea that how can I add the validation for the correct format of phone number.
 
Thanks in Advance,
 
Regards,
Kamlesh


WesNolte__cWesNolte__c
Can you post the code you have (including jQuery)?
 
Wes 


kamlesh_chauhankamlesh_chauhan
Hi,
 
I have added 2 .js files in static resource. Following are the required sample code. 
You can download .js file from here.
 
Please let me know if any easy way is possible.
 
Apex Page:
                    
<apex:page id="testPage" controller="TestController">
  <apex:includeScript value="{!URLFOR($Resource.JS, '/JS/jquery/jquery.maskedinput-1.2.2.js')}"/>
   <apex:includeScript value="{!URLFOR($Resource.JS, '/JS/jquery/jquery-1.3.1.js')}"/>
    
<script>
       $("#testPage:testform:txtDate").mask("(999) 999-9999");
        function CheckDefaultpage() {

        alert("hi");
           }

</script>
  <apex:form id="testform" >
            
 <apex:inputText id="txtDate"  onblur="CheckDefaultpage();" />
</apex:form>
</apex:page>

 
 
Controller:
 
public class TestController
{
    public string SpecialtyText {get;set;}
    public List<SelectOption> getSpecialty()
    {    
        List<Specialty__c> objSpecialty = [select Id, Name from Specialty__c where ParentId__c = null and IsDeleted =false order by Name];        
        List<SelectOption> listSpecialty = new List<SelectOption>();    
        for(Specialty__c s : objSpecialty)    
        {        
            listSpecialty.add(new SelectOption(s.Id,s.Name));    
        }        
        system.debug('Test');
        return listSpecialty;
    }
}
			
 
Regards,
Kamlesh
Message Edited by kamlesh_chauhan on  01-07-2010 07:39 PM


WesNolte__cWesNolte__c
A few things are amiss. 
 
1. You need to put all jQuery code in a document.ready function (well not really, but it's convenient and recommended).
2. Instead of using salesforce ids, which change if you move your input tag around in the code, using classes works quite well too. There is a performance loss, but it's not noticable unless you page is very very large. 
3. You don't need to use function calls with jQuery necessarily. You can use the document.ready function to 'attach' event handlers to certain tags.
 
Here's my page (you can ignore my static resource inclusion, my files are slightly different from yours):
 
 
<apex:page >	<apex:includeScript value="{!$Resource.jquery}"/>	<apex:includeScript value="{!$Resource.jMaskedInput}"/>		<script>			$(document).ready(function() {		   // put all your jQuery goodness in here.		   		   $(".txt-mask").mask("(999) 999-9999"); /* I've used classes because it avoids having to deal with tricky salesforce ids */		   		   		 });		</script>	<apex:form id="testform" >            		<apex:inputText id="txtDate" styleClass="txt-mask"/>	 	</apex:form></apex:page>
 
I've tested this and it works very nicely. Welcome to jQuery ;)
 
Wes 
 
 
 
 
This was selected as the best answer
kamlesh_chauhankamlesh_chauhan
Thanks for answering. I will try it out and hope it will work perfectly. I have used lots of solutions provided by you in community so don't have any doubt on you :smileyhappy: . This was my first try of jQuery with salesforce :smileywink:.
 
 
Regards,
Kamlesh


WesNolte__cWesNolte__c
No problem. I've written up a blog post about this piece of code.. thanks for the idea. You can find it at http://bit.ly/8DWfDA.
 
Wes 


Drew ChaplinDrew Chaplin
Wes

I've used the VF code from your post above.  I've also uploaded the 2 static resources.   The masks do not work.   What else should I check?   is there something I'm mssing?


Drew ChaplinDrew Chaplin
I figured it out.   The JS on your Force.com page is different than that I downloaded from Digital Bush.  The Digital Bush site looks to be a newer version.   I copied the jMaskInput from your site and it's works now.   


manu123manu123
Drew,
I am tried to implement same masking following post from 
http://th3silverlining.com/2010/01/08/masking-field-values-on-visualforce-input/

I cannot get the masking for Date, can you please provide some inputs