You are viewing limited content. For full access, please sign in.

Question

Question

Phone number masking not masking number.

asked on June 11, 2014

I am following the steps from 

http://www.laserfiche.com/support/webhelp/laserficheforms/9.1/en-us/forms/Content/FieldMasks.htm

And I cannot get the number to mask. I have the path of the script on a server and just used that path.

 

Code:

$(document).ready(function () {
 	
  $('.phone').on('change' , 'input' , mask_num);
  
  
  function mask_num {
  	$.getScript('\\serverName\folder\folder\folder\jquery.mask.mi        n.js', function () {

	  $(".phone input").mask("(999)999-9999");
        
        }
   });
  
  
});

Setup:

$(document).ready(function () {
 	
  $('.phone').on('change' , 'input' , mask_num);
  
  
  function mask_num {
  	$.getScript('\\serverName\folder\folder\folder\jquery.mask.mi        n.js', function () {

	  $(".phone input").mask("(999)999-9999");
        
        }
   });
  
  
});

 

Thanks!

0 0

Answer

APPROVED ANSWER
replied on June 11, 2014

Try $('.phone input') instead of $('.phone') for your selectors. In addition, you can apply the mask when the form loads, so the following should work:

 

$(document).ready(function () {
$.getScript('http://formsServerName/Forms/js/jquery.mask.min.js', function () {
$(".phone input").mask("(999)999-9999");
});
});

The way you have the path to the script formatted might be an issue. If the mask is not working with this code, I think that path formatting is probably the culprit.

1 0
replied on June 11, 2014

What do I do if that location doesnt exist?

0 0
replied on June 11, 2014

Well, you need to put the jQuery mask script file in the correct location (as specified on that help page). It should exist.

0 0
replied on June 11, 2014

I got it in the correct spot, going to http://server/Forms/js gives me...

And the script is there.

0 0
replied on June 11, 2014

And the mask isn't being applied as you type in the field?

0 0
replied on June 11, 2014

Nope, this is all thats happening...

0 0
replied on June 11, 2014

The library isn't loading or the formatting is not being applied at the appropriate time. So the issue is either the URL in .getScript(), your selector for the phone number's input field, or the event when the code runs.

0 0
replied on June 11, 2014

Are there any other ways to do this that aren't too daunting ?

0 0
replied on June 11, 2014

This is probably the most straightforward way. If you can share the exact JavaScript you're using I should be able to tell you what the problem is.

0 0
replied on June 11, 2014
(function(g){"function"===typeof define&&define.amd?define(["jquery"],g):g(window.jQuery||window.Zepto)})(function(g){var y=function(a,f,d){var k=this,x;a=g(a);f="function"===typeof f?f(a.val(),void 0,a,d):f;k.init=function(){d=d||{};k.byPassKeys=[9,16,17,18,36,37,38,39,40,91];k.translation={0:{pattern:/\d/},9:{pattern:/\d/,optional:!0},"#":{pattern:/\d/,recursive:!0},A:{pattern:/[a-zA-Z0-9]/},S:{pattern:/[a-zA-Z]/}};k.translation=g.extend({},k.translation,d.translation);k=g.extend(!0,{},k,d);a.each(function(){!1!==
d.maxlength&&a.attr("maxlength",f.length);d.placeholder&&a.attr("placeholder",d.placeholder);a.attr("autocomplete","off");c.destroyEvents();c.events();var b=c.getCaret();c.val(c.getMasked());c.setCaret(b+c.getMaskCharactersBeforeCount(b,!0))})};var c={getCaret:function(){var b;b=0;var e=a.get(0),c=document.selection,e=e.selectionStart;if(c&&!~navigator.appVersion.indexOf("MSIE 10"))b=c.createRange(),b.moveStart("character",a.is("input")?-a.val().length:-a.text().length),b=b.text.length;else if(e||
"0"===e)b=e;return b},setCaret:function(b){if(a.is(":focus")){var e;e=a.get(0);e.setSelectionRange?e.setSelectionRange(b,b):e.createTextRange&&(e=e.createTextRange(),e.collapse(!0),e.moveEnd("character",b),e.moveStart("character",b),e.select())}},events:function(){a.on("keydown.mask",function(){x=c.val()});a.on("keyup.mask",c.behaviour);a.on("paste.mask drop.mask",function(){setTimeout(function(){a.keydown().keyup()},100)});a.on("change.mask",function(){a.data("changeCalled",!0)});a.on("blur.mask",
function(b){b=g(b.target);b.prop("defaultValue")!==b.val()&&(b.prop("defaultValue",b.val()),b.data("changeCalled")||b.trigger("change"));b.data("changeCalled",!1)});a.on("focusout.mask",function(){d.clearIfNotMatch&&c.val().length<f.length&&c.val("")})},destroyEvents:function(){a.off("keydown.mask keyup.mask paste.mask drop.mask change.mask blur.mask focusout.mask").removeData("changeCalled")},val:function(b){var e=a.is("input");return 0<arguments.length?e?a.val(b):a.text(b):e?a.val():a.text()},getMaskCharactersBeforeCount:function(b,
e){for(var a=0,c=0,d=f.length;c<d&&c<b;c++)k.translation[f.charAt(c)]||(b=e?b+1:b,a++);return a},determineCaretPos:function(b,a,d,h){return k.translation[f.charAt(Math.min(b-1,f.length-1))]?Math.min(b+d-a-h,d):c.determineCaretPos(b+1,a,d,h)},behaviour:function(b){b=b||window.event;var a=b.keyCode||b.which;if(-1===g.inArray(a,k.byPassKeys)){var d=c.getCaret(),f=c.val(),n=f.length,l=d<n,p=c.getMasked(),m=p.length,q=c.getMaskCharactersBeforeCount(m-1)-c.getMaskCharactersBeforeCount(n-1);p!==f&&c.val(p);
!l||65===a&&b.ctrlKey||(8!==a&&46!==a&&(d=c.determineCaretPos(d,n,m,q)),c.setCaret(d));return c.callbacks(b)}},getMasked:function(b){var a=[],g=c.val(),h=0,n=f.length,l=0,p=g.length,m=1,q="push",s=-1,r,u;d.reverse?(q="unshift",m=-1,r=0,h=n-1,l=p-1,u=function(){return-1<h&&-1<l}):(r=n-1,u=function(){return h<n&&l<p});for(;u();){var v=f.charAt(h),w=g.charAt(l),t=k.translation[v];if(t)w.match(t.pattern)?(a[q](w),t.recursive&&(-1===s?s=h:h===r&&(h=s-m),r===s&&(h-=m)),h+=m):t.optional&&(h+=m,l-=m),l+=
m;else{if(!b)a[q](v);w===v&&(l+=m);h+=m}}b=f.charAt(r);n!==p+1||k.translation[b]||a.push(b);return a.join("")},callbacks:function(b){var e=c.val(),g=c.val()!==x;if(!0===g&&"function"===typeof d.onChange)d.onChange(e,b,a,d);if(!0===g&&"function"===typeof d.onKeyPress)d.onKeyPress(e,b,a,d);if("function"===typeof d.onComplete&&e.length===f.length)d.onComplete(e,b,a,d)}};k.remove=function(){var a=c.getCaret(),d=c.getMaskCharactersBeforeCount(a);c.destroyEvents();c.val(k.getCleanVal()).removeAttr("maxlength");
c.setCaret(a-d)};k.getCleanVal=function(){return c.getMasked(!0)};k.init()};g.fn.mask=function(a,f){this.unmask();return this.each(function(){g(this).data("mask",new y(this,a,f))})};g.fn.unmask=function(){return this.each(function(){try{g(this).data("mask").remove()}catch(a){}})};g.fn.cleanVal=function(){return g(this).data("mask").getCleanVal()};g("*[data-mask]").each(function(){var a=g(this),f={};"true"===a.attr("data-mask-reverse")&&(f.reverse=!0);"false"===a.attr("data-mask-maxlength")&&(f.maxlength=
!1);"true"===a.attr("data-mask-clearifnotmatch")&&(f.clearIfNotMatch=!0);a.mask(a.attr("data-mask"),f)})});

There it is, when I posted this directly into the javascript editor and ran it using your code it worked, I'm just curious why it wouldnt work the normal way!

0 0
replied on June 11, 2014

Oh, I didn't mean give me the contents of the jQuery.mask.min.js file. I meant to paste the code you entered in the JavaScript section of the CSS and JavaScript page in Forms.

 

If you're saying that when you pasted that into Forms it worked, then it's definitely an issue with the URL you put in $.getScript().

0 0
replied on June 11, 2014

Which is weird because the script file comes up when I go to the URL.

 

0 0
replied on June 11, 2014

I think the issue is that the .getScript() method doesn't like this URL format.

 

\\serverName\folder\folder\folder\jquery.mask.min.js'

 

If you format the URL

 

http://formsServerName/Forms/js/jquery.mask.min.js

 

I think it should work.

0 0
replied on June 11, 2014 Show version history

Also, here is the code.

 

$(document).ready(function () {

 $.getScript('"http://serverName/Forms/js/jquery.mask.min.js"', function () {
    $(".phone input").mask("(999)999-9999");
 });

  
});

 

0 0
replied on June 13, 2014

Are you replacing serverName with the Forms server machine?

0 0
replied on June 13, 2014

Yeah I was, its weird because when I click the link I can see the script...

0 0
replied on June 13, 2014

Can you upload the business process here so we can take a look at it? Just change the extension to .txt before you upload it here.

0 0

Replies

replied on September 5, 2014 Show version history

Hey John,

 

Kind of late on this. I've just been struggling with the same situation as you. The trick was that the field I was using for phone number was a Number field, not a Single Line field. For some reason, Forms wouldn't let me do the format until I changed it to Single Line. After that change, the code that worked better for me was Eric's:

$(document).ready(function () {
$.getScript('https://ServerName/Forms/js/jquery.maskedinput.js', function () {
$('.phone input').mask('(999)999-9999');
});
});

Another thing I've noticed about your situation, is that it seems you have the field on a collection. If you haven't updated forms already to 9.1.1.1522, I suggest doing so. If that still doesn't work, test the code by using a field not in a collection. If it works outside the collection, then it's likely a bug on Forms.

1 0
replied on September 5, 2014

Number fields won't work because of the dashes in the field mask. If the field is in a repeatable collection, you'll need to call the mask() method each time a new collection is added to the form.

3 0
replied on June 15, 2014

There script you provided have some two issues:

1. missing() after mask_num function;

2. the position for the "}" is wrong.

I tested following script can work:

$(document).ready(function () {
 $(".phone").on("change" , "input" , mask_num);
 function mask_num(){
 $.getScript('http://FormsServer/Forms/js/jquery.mask.min.js', function () {
   $(".phone input").mask("(999)999-9999");   
 });
    }
 });

 

0 0
replied on June 16, 2014

That still doesnt work, I dont know why it isnt using the script. I'm just going to stick with having the full script in there since it seems to be the only way to work.

0 0
replied on September 5, 2014

Hey John,

 

Kind of late on this. I've just been struggling with the same situation as you. The trick was that the field I was using for phone number was a Number field, not a Single Line field. For some reason, Forms wouldn't let me do the format until I changed it to Single Line. After that change, the code that worked better for me was Eric's:

$(document).ready(function () {
$.getScript('https://ServerName/Forms/js/jquery.maskedinput.js', function () {
$('.phone input').mask('(999)999-9999');
});
});

Another thing I've noticed about your situation, is that it seems you have the field on a collection. If you haven't updated forms already to 9.1.1.1522, I suggest doing so. If that still doesn't work, test the code by using a field not in a collection. If it works outside the collection, then it's very likely this is a bug on Forms.

replied on July 20, 2017

I have a customer trying to use this recommendation and it prevented the forms server from saving to the repository with the error: The PDF generator was unable to contact the Laserfiche Forms server. Please ensure your SSL settings are correct. [LFF4112-PdfNetworkError]

I had to remove the javascript.

They were trying to reach a script here http://localhost/Forms/js/jquery.mask.min.js

Does anyone know what the problem is?

0 0
replied on August 11, 2017

Instead of using localhost in the URL, please change it to full domain name of the machine name.

0 0
replied on August 11, 2017

thank you

0 0
replied on August 8, 2018

I wanted to use this same mask.  Testing the identical code with my Full domain name on the machine name, it failed for Forms 10.3.

I am also not able to resolve to:

https://ServerName/Forms/js/jquery.mask.min.js

where ServerName = FQDN.

 

Event Viewer Error:

[500]: Sorry, but the page you requested cannot be found. Be sure that you entered the URL correctly, and then refresh your browser.

Function: Error
 

Does this script work for 10.3+?

The documentation was specific to version 9.1.

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.