Phone number format using JS in Forms 11 update 3?

SELECTED ANSWER

replied on February 2

jquery.mask.min.js can no longer be used as new form designer doesn't use JQuery. You can write your own phoneMask function similar as following and call it when need:

function phoneMask (phone) {
  return phone.replace(/\D/g, '')
    .replace(/^(\d)/, '($1')
    .replace(/^(\(\d{3})(\d)/, '$1) $2')
    .replace(/(\d{3})(\d{1,5})/, '$1-$2')
    .replace(/(-\d{4})\d+?$/, '$1');
}

LFForm.onFieldBlur(function(){ LFForm.setFieldValues({fieldId: 2}, phoneMask(LFForm.getFieldValues({fieldId: 2}))) }, {fieldId: 2})

You can also put some common used functions in a separate JS file and add the URL for the file in the external URL and call the functions from inline JavaScript.

Take the above one for example, you can put following pieces of code in the JS file and the URL to access the file is https://xxx.laserfiche.com/Forms/js/mask.js

function phoneMask (phone) {
  return phone.replace(/\D/g, '')
    .replace(/^(\d)/, '($1')
    .replace(/^(\(\d{3})(\d)/, '$1) $2')
    .replace(/(\d{3})(\d{1,5})/, '$1-$2')
    .replace(/(-\d{4})\d+?$/, '$1');
}

You add the URL in the external tab of JavaScript for the form

and call the function from Inline JavaScript with following piece of code:

LFForm.onFieldBlur(function(){ LFForm.setFieldValues({fieldId: 2}, phoneMask(LFForm.getFieldValues({fieldId: 2}))) }, {fieldId: 2})

4 0

View 5 previous replies

replied on February 3

Wow! Great solution!

0 0

replied on February 3 • Show version history

That works really well. Is there a way to reference a CSS class instead of a field ID?

Edit: Is there anything special I need to do if the field is in a table? It seems to work fine except in that situation.

0 0

replied on February 5

Hi Mike,

The built-in api provided in new form designer cannot accept the CSS class as parameter, so it can only be done with field ID, you may write your own code to realize it.

The setFieldValues and getFieldValues methods are both supported for fields in Collection/Table, in this post https://doc.laserfiche.com/laserfiche.documentation/11/administration/en-us/Default.htm#../Subsystems/Forms/Content/Javascript-and-CSS/JavaScript-in-the-Forms-Designer.htm%3FTocPath%3DForms%7CCreating%2520a%2520Form%7C_____9 it has some examples to illustrate, e.g.:

For a repeatable field with 3 rows, where each row has a single line with fieldID: 10 and row values are: row 1, value "a"; row 2, value "b"; and row 3, value "c":
- LFForm.getFieldValues({fieldId: 10}) will return ["a", "b", "c"].
- LFForm.getFieldValues({fieldId: 10, index: 0) will return "a".

0 0

replied on February 6

I am uncertain how to proceed from here. The documentation suggests that the method is identical for a single field or a field in a table:

The following should work to set the values in each row of the table but it's not working:

LFForm.onFieldBlur(function()
{ LFForm.setFieldValues({fieldId: 76},
phoneMask(LFForm.getFieldValues({fieldId: 76}))) }, {fieldId: 76})

This is something I will need to learn more about.

0 0

replied on February 6

The problem is, with a table, you are now passing an array of values into the phoneMask function: phoneMask(LFForm.getFieldValues({fieldId: 76}))

So you need to either modify the function to handle an array. Or you need to work through each value in the array and send each one to the function.

Here's what the latter will look like, taking the array of values and passing each one into the function:

function phoneMask (phone) {
  return phone.replace(/\D/g, '')
    .replace(/^(\d)/, '($1')
    .replace(/^(\(\d{3})(\d)/, '$1) $2')
    .replace(/(\d{3})(\d{1,5})/, '$1-$2')
    .replace(/(-\d{4})\d+?$/, '$1');
}

LFForm.onFieldBlur(function(){ 
  var updatedValues = LFForm.getFieldValues({fieldId: 76});
  updatedValues.forEach(function(part, index) {
    this[index] = phoneMask(this[index]);
  }, updatedValues);
  LFForm.setFieldValues({fieldId: 76}, updatedValues );
  }, {fieldId: 76});

2 0

replied on February 6

Thanks Matthew, that was very helpful and it works like a charm.

1 0

replied on February 6

You're quite welcome.

0 0

replied on February 14 • Show version history

You actually can use CSS class as parameter, we have updated the help document to include sample for findFieldsByClassName(className).

3 0

replied on February 1

The Javascript functionality within the Modern Designer runs within a sandboxed iFrame so it is separate from the structure of the form itself. The effect is that the code within the iFrame, that you are writing, cannot impact the form itself except by using the options included in the LFForm object. They are basically separate windows. Since this isn't something that appears to be included in the LFForm object, you won't be able to do it on the Modern designer.

My suggestion is to continue to use the Classic designer for forms where this is important, or check to see if using the Regular Expression option on the fields in the Modern designer will meet your needs.

0 0

replied on February 1

Hi Matthew; thanks for the feedback.

I hope field masking is something that LF can implement in a future update. RegEx is good for validation, but it's simply not a solution when we need a field to be masked.

Thanks,

Mike

2 0

replied on February 1

I agree!

0 0

Question

Question

Phone number format using JS in Forms 11 update 3?

Answer

Replies

Sign in to reply to this post.