input mask

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. 

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.

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:

---

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.

@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':

 

 

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.)

@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.

It works with multiple controls outside the repeating table.

Any help will be appreciated.

Thanks,

@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.