michael_campbel
Design Dabbler

input mask

Jump to solution

I want to create a input mask on my form for telephone numbers, etc, e.g. (99) 9999 9999 but I can't find any simple solution on Nintex Forms. Anyone know how to create input masks for telephone numbers, credit cards, etc.?

Reply
9 Replies
jwstl
Design Dabbler

Re: input mask

Jump to solution

After some trial, and error I was able to get the masked inputs to work.

Here is the code:

NWF$(document).ready(function(){

    $('#'+txtPhone).mask('(000) 000-0000');

});

Create a text field, with a JavaScript variable ID of txtPhone

Add the JavaScript references to your form:

https://share/sites/dashboard/SiteAssets/jquery-1.8.3.js
https://share/sites/dashboard/SiteAssets/jquery.mask.js

I'm using the following library:

jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements. 

Reply
michael_campbel
Design Dabbler

Re: input mask

Jump to solution

I am not a Java expert in Nintex and I followed your instructions, but it did not work.

1. I created a field called "Telephone Number" and changed "Store Client ID in JavaScript variable" to Yes and in the Client ID put "txtPhone"

2. In the Form Settings I pasted the JavaScript in the Customer JavaScript field

I save and published form and expected to see input mask...,.but the field did not look any different to before.

Reply
chaddavis
Design Canvas Artiste

Re: input mask

Jump to solution

I realize this is a very old post, but I came across it when I wanted to complete the same task that Michael Campbell‌ was trying to accomplish. Since the question was never marked as answered, I thought I'd enhance the steps I took to complete it in case anyone else comes across this in the future.

I was able to use jason white‌'s solution and it worked great. 

There are 3 main steps:

  1. Include the Custom JavaScript Files in the Custom JavaScript Includes Field
    • Reference the .js files locally (best option)
      • Download the .js files
      • Upload them into a library in your SharePoint environment
      • Use a relative link to each file
    • OR, Reference the .js files externally (needed for Nintex Live Forms)
      • You can find other links to the files, but here are the two I used in my testing:
        • //code.jquery.com/jquery-3.3.1.min.js
        • //cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js
  2. Add the Custom JavaScript Code
    • Add your JavaScript code to the Custom JavaScript field:
      • Jason White's example for a phone mask:
        • NWF$(document).ready(function(){
              $('#' + txtPhone).mask('(000) 000-0000');
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
      • My example with a custom mask and Jason's phone mask:
        • NWF$(document).ready(function(){
               $('#' + title).mask('YY.YYYYYYY', {
                    'translation': {
                         Y: {pattern: /[0-9]/}
                    }
               });
               $('#' + phone).mask('(000) 000-0000');
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

          (My custom mask could've been achieved with '00.0000000' alone, but I wanted to show how you can setup a custom mask using jQuery Mask Plugin's documentation.)

          • Notice how I only used the NWF$(document) line once even though I've added two masks. You can add as many masks as you'd like to as many fields as you'd like, but only need the first line once.
  3. Set the Client ID JavaScript Variable(s)
    • Edit the text field on your form
    • Expand the Advanced section
    • Set the 'Store Client ID in JavaScript variable' field to Yes
    • Create your variable name in the 'Client ID JavaScript variable name'
      • This variable name must match the variable in your code
      • In my example code, I used the following variables:
        • 'title' for my custom mask
        • 'phone' for the phone field

Using this exact process worked great for me.

Note:

If you have multiple fields with the same mask, you don't need to create a separate variable name for each field. Use the following process instead.

Setting a 'Client ID JavaScript variable name' means you can call out only that one field in your code. However, if you set a Control CSS Class instead, you can reuse the class name across any number of fields, and only use one line of JavaScript to apply your mask to all fields with that class name.

Let's say you have multiple phone number fields on your form. 

Instead of setting variable names on the fields like 'homePhone' and 'workPhone', expand the Formatting section and set the Control CSS Class to 'phone':

Now replace this line of code

$('#' + phone).mask('(000) 000-0000');

with this

$('.phone').mask('(000) 000-0000');

This line will apply the mask to every single field on your form that has a Control CSS Class of 'phone' set.

(Notice the '.' is only in the JavaScript. Do not add it to the Control CSS Class field.)

One additional item to mention:

Initially, I thought the $ would need to be prepended with NWF, since that's how Nintex automatically includes jQuery, and then I wouldn't need to include a separate reference to jQuery. However, doing that broke the mask plugin. So, you must remember to include your jQuery reference in Step 1 and do not change $ to NWF$ on the mask lines of code.

End Product:

View solution in original post

Reply
perlanava
Canvas Initiate

Re: input mask

Jump to solution

can you tell me how could be the format for currency? text to currency pls 


@chaddavis wrote:

I realize this is a very old post, but I came across it when I wanted to complete the same task that Michael Campbell‌ was trying to accomplish. Since the question was never marked as answered, I thought I'd enhance the steps I took to complete it in case anyone else comes across this in the future.

 

I was able to use jason white‌'s solution and it worked great. 

 

There are 3 main steps:

  1. Include the Custom JavaScript Files in the Custom JavaScript Includes Field
    • Reference the .js files locally (best option)
      • Download the .js files
      • Upload them into a library in your SharePoint environment
      • Use a relative link to each file
    • OR, Reference the .js files externally (needed for Nintex Live Forms)
      • You can find other links to the files, but here are the two I used in my testing:
        • //code.jquery.com/jquery-3.3.1.min.js
        • //cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js
  2. Add the Custom JavaScript Code
    • Add your JavaScript code to the Custom JavaScript field:
      • Jason White's example for a phone mask:
        • NWF$(document).ready(function(){
              $('#' + txtPhone).mask('(000) 000-0000');
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
      • My example with a custom mask and Jason's phone mask:
        • NWF$(document).ready(function(){
               $('#' + title).mask('YY.YYYYYYY', {
                    'translation': {
                         Y: {pattern: /[0-9]/}
                    }
               });
               $('#' + phone).mask('(000) 000-0000');
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

          (My custom mask could've been achieved with '00.0000000' alone, but I wanted to show how you can setup a custom mask using jQuery Mask Plugin's documentation.)

          • Notice how I only used the NWF$(document) line once even though I've added two masks. You can add as many masks as you'd like to as many fields as you'd like, but only need the first line once.
  3. Set the Client ID JavaScript Variable(s)
    • Edit the text field on your form
    • Expand the Advanced section
    • Set the 'Store Client ID in JavaScript variable' field to Yes
    • Create your variable name in the 'Client ID JavaScript variable name'
      • This variable name must match the variable in your code
      • In my example code, I used the following variables:
        • 'title' for my custom mask
        • 'phone' for the phone field

 

Using this exact process worked great for me.

 

Note:

If you have multiple fields with the same mask, you don't need to create a separate variable name for each field. Use the following process instead.

 

Setting a 'Client ID JavaScript variable name' means you can call out only that one field in your code. However, if you set a Control CSS Class instead, you can reuse the class name across any number of fields, and only use one line of JavaScript to apply your mask to all fields with that class name.

 

Let's say you have multiple phone number fields on your form. 

Instead of setting variable names on the fields like 'homePhone' and 'workPhone', expand the Formatting section and set the Control CSS Class to 'phone':

 

Now replace this line of code

$('#' + phone).mask('(000) 000-0000');

with this

$('.phone').mask('(000) 000-0000');

This line will apply the mask to every single field on your form that has a Control CSS Class of 'phone' set.

(Notice the '.' is only in the JavaScript. Do not add it to the Control CSS Class field.)

 

 

One additional item to mention:

Initially, I thought the $ would need to be prepended with NWF, since that's how Nintex automatically includes jQuery, and then I wouldn't need to include a separate reference to jQuery. However, doing that broke the mask plugin. So, you must remember to include your jQuery reference in Step 1 and do not change $ to NWF$ on the mask lines of code.

 

 

End Product:


 

0 Kudos
Reply
bmanda
Canvas Initiate

Re: input mask

Jump to solution

Hi Chad @Chaddavis,

This worked great for my requirement. I was able to format phone number and time (00:00) using this solution. I appreciate the detailed steps. I have a followup to this requirement, I have a repeating section that uses the phone number field, and when adding additional rows, formatting is not applied. Could you please tell me how that can achieve?

I really appreciate any help you can provide.

0 Kudos
Reply
chaddavis
Design Canvas Artiste

Re: input mask

Jump to solution

@bmanda, I'm sorry for not seeing this sooner. I'm sure you probably figured out how to do this by now, but in case anyone else sees this post, I'll answer it. 

When applying a single mask to multiple fields (and a repeating section is a great example of this), you'll want to use the alternate solution I mentioned in my answer under the heading Note:. 

 

Note:

If you have multiple fields with the same mask, you don't need to create a separate variable name for each field. Use the following process instead.

 

Setting a 'Client ID JavaScript variable name' means you can call out only that one field in your code. However, if you set a Control CSS Class instead, you can reuse the class name across any number of fields, and only use one line of JavaScript to apply your mask to all fields with that class name.

 

Let's say you have multiple phone number fields on your form. 

Instead of setting variable names on the fields like 'homePhone' and 'workPhone', expand the Formatting section and set the Control CSS Class to 'phone':

chaddavis_0-1616432107041.png

 

chaddavis_1-1616432107043.png

 

Now replace this line of code

$('#' + phone).mask('(000) 000-0000');‍

with this

$('.phone').mask('(000) 000-0000');‍

This line will apply the mask to every single field on your form that has a Control CSS Class of 'phone' set.

(Notice the '.' is only in the JavaScript. Do not add it to the Control CSS Class field.)

0 Kudos
Reply
bmanda
Canvas Initiate

Re: input mask

Jump to solution

@chaddavis Thank you so much for taking the time to reply. I did try the alternate solution, and it worked for the first row only. Please see the image below.

 

bmanda_0-1616437304964.png

It works with multiple controls outside the repeating table.

bmanda_1-1616437460630.png

Any help will be appreciated.

 

Thanks,

 

0 Kudos
Reply
chaddavis
Design Canvas Artiste

Re: input mask

Jump to solution
Ok, I think I realize what's happening now. I don't have time to test this myself, but I think the code is only running on the form as it was when it was first loaded. So, when the repeating section creates new fields, even though the CSS class is added to them, I don't think the code is seeing them. This is only a guess right now, but I'm curious if it'll lead you down the right path.

Try adding another listener to the code so that when the fields are added, the code is reran.
0 Kudos
Reply
chaddavis
Design Canvas Artiste

Re: input mask

Jump to solution

@perlanava I'm sorry I didn't see this sooner. 

 

The example I gave was for phone numbers and a custom mask, but it can be used for anything. So, you could build your own custom mask for currency, or just review the mask library documentation for how they recommend setting up for currency.

0 Kudos
Reply