Skip to main content

Notifications

Community site session details

Community site session details

Session Id : iqPiA+sVcwWm3asDJEaAw5
Power Pages - General Discussions
Unanswered

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

Like (0) ShareShare
ReportReport
Posted on 13 Dec 2023 03:45:35 by 234

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:
  • Surendran Ravindran Profile Picture
    212 on 13 Dec 2023 at 13:55:25
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    @apangeles 

     

    There is no  OOTB ,

     

    Either you can use this else you can write your own

     

    Regards

    Suendran Ravindran

  • apangeles Profile Picture
    234 on 13 Dec 2023 at 08:30:23
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    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 13 Dec 2023 at 07:57:09
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    @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
    234 on 13 Dec 2023 at 07:49:18
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    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 13 Dec 2023 at 07:33:36
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    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.

     

  • Surendran Ravindran Profile Picture
    212 on 13 Dec 2023 at 07:27:21
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    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.

     

     

  • apangeles Profile Picture
    234 on 13 Dec 2023 at 04:01:10
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    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)');
    });
    });

  • Fubar Profile Picture
    7,846 Super User 2025 Season 1 on 13 Dec 2023 at 03:58:52
    Re: Pop-up form telephone/mobile phone field masking using Javascript

    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.

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

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Markus Franz – Community Spotlight

We are honored to recognize Markus Franz as our April 2025 Community…

Kudos to the March Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,670 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 66,004 Most Valuable Professional

Leaderboard