web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Pop-up form telephone/...
Power Pages
Unanswered

Pop-up form telephone/mobile phone field masking using Javascript

(0) ShareShare
ReportReport
Posted on by 252

Hi Community, 

 

Can anyone help me figure this out? I'd like to change the masking for telephone column fields in a pop-up form on my page. Putting javascript on the actual page with a form works but in this case that the form is inside a pop up window, my code does not work. What should I do? 

 

Thanks in advance

Categories:
I have the same question (0)
  • Fubar Profile Picture
    8,487 Super User 2026 Season 1 on at

    Edit the Form using the Portal/Power Pages Management App (not the designer).  The Basic Form definition has an "Additional Settings" Tab which has an area for you to add Custom JavaScript for the form.

  • apangeles Profile Picture
    252 on at

    Hi @Fubar,

     

    Does this work? I just generated this using AI.

    $(document).ready(function () {
    // Replace masking text with custom details
    $('#telephone1').attr('placeholder', 'Include country code (e.g. +63 9171110000)');
    $('#mobilephone').attr('placeholder', 'Include country code (e.g. +63 9171110000)');
    });

     

    Or...

     

    $(document).ready(function () {
    // Identify all mobile phone fields regardless of form or table
    var mobileFields1 = $('[data-attribute="sportal_MobilePhone"]');
    var mobileFields2 = $('[data-attribute="sportal_MobilePhone2"]');
    var telephone = $('[data-attribute="sportal_Telephone"]');

    // Replace placeholder text for each field
    mobileFields1.each(function () {
    $(this).attr('placeholder', 'Include country code (e.g. +63 9171110000)');
    });
    mobileFields2.each(function () {
    $(this).attr('placeholder', 'Include country code (e.g. +63 9171110000)');
    });
    telephone.each(function () {
    $(this).attr('placeholder', 'Include country code (e.g. +63 9171110000)');
    });
    });

  • Surendran Ravindran Profile Picture
    212 on at

    Hi @apangeles  ,

     

    As @Fubar  mentioned , you need the javascript in portal management --> Basic form ---> Additional Setting (Scroll Down) --> Custom javascript (add the code here with document ready)

     

    Surendran_R_0-1702452395346.png

    Regards

    Surendran Ravindran

     

     

    --------------------------

    --------------------------------------------------------------------------------------

    Hope that helps.

    If the post solves your problem, please mark it as solution. If it helps, consider a thumbs up.

     

     

  • Surendran Ravindran Profile Picture
    212 on at

    Hi @apangeles ,

     

    https://oliverrodrigues365.com/2020/04/15/power-apps-portals-adding-field-mask/ 

     

     

     

    This might site might helpfull else  below script for masking various data types:

     

     

    $(document).ready(function(){
     $('.date').mask('00/00/0000');
     $('.time').mask('00:00:00');
     $('.date_time').mask('00/00/0000 00:00:00');
     $('.cep').mask('00000-000');
     $('.phone').mask('0000-0000');
     $('.phone_with_ddd').mask('(00) 0000-0000');
     $('.phone_us').mask('(000) 000-0000');
     $('.mixed').mask('AAA 000-S0S');
     $('.cpf').mask('000.000.000-00', {reverse: true});
     $('.cnpj').mask('00.000.000/0000-00', {reverse: true});
     $('.money').mask('000.000.000.000.000,00', {reverse: true});
     $('.money2').mask("#.##0,00", {reverse: true});
     $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
     translation: {
     'Z': {
     pattern: /[0-9]/, optional: true
     }
     }
     });
     $('.ip_address').mask('099.099.099.099');
     $('.percent').mask('##0,00%', {reverse: true});
     $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
     $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
     $('.fallback').mask("00r00r0000", {
     translation: {
     'r': {
     pattern: /[\/]/,
     fallback: '/'
     },
     placeholder: "__/__/____"
     }
     });
     $('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});
    });

     

     

    Regards

    Surendran Ravindran

     

    --------------------------------------------------------------------------------------

    Hope that helps.

    If the post solves your problem, please mark it as solution. If it helps, consider a thumbs up.

     

  • apangeles Profile Picture
    252 on at

    Hi @Surendran_R ,

     

    Understood where to place the Javascript. Question about the code you shared. 

    $(document).ready(function(){
     $('.date').mask('00/00/0000');

    The '.date' will be the schema or logical name of the column? Then the mask will then be the masking inside the field. Just confirming if my understanding is correct. 

     

    Thanks in advance. 

     

     

  • Surendran Ravindran Profile Picture
    212 on at

    @apangeles 

     

    Please do inspect input element and get the id 

    and Use like this 

    $("#id").mask()

     

    Note: Most case it is logical name

     

    Regards

    Surendran Ravindran

  • apangeles Profile Picture
    252 on at

    Hi @Surendran_R ,

     

    Last question for now. For this to work, I really need to download and insert the plugin into my environment. Will it not work OOTB?

    apangeles_0-1702456208883.png

     

  • Surendran Ravindran Profile Picture
    212 on at

    @apangeles 

     

    There is no  OOTB ,

     

    Either you can use this else you can write your own

     

    Regards

    Suendran Ravindran

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
rezarizvii Profile Picture

rezarizvii 53

#2
DP_Prabh Profile Picture

DP_Prabh 49

#3
oliver.rodrigues Profile Picture

oliver.rodrigues 24 Most Valuable Professional

Last 30 days Overall leaderboard