jQuery Mask only working for one user, not all.

asked on April 17, 2020

We've just added the jquery.mask.min.js plugin to our server that we acquired here and are having some issues getting it work properly. The individual from our IT department who installed the plugin on the server is able to get it to work without issue, but for anyone else that tries, the masking doesn't occur. We are using it to mask phone numbers and SSNs with the following code:

$(document).ready(function () {
  
/*SSN Mask*/
$.getScript('http://ServerName/Forms/js/jquery.mask.min.js', function () {
$(".ssn input").mask("999-99-9999");
});

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

Where "ServerName" is the name of the server that LF Forms is installed on.

We also noticed that it's only working for that one individual when they're logged in as themselves on Laserfiche Forms. Opening the form in incognito mode via Chrome, it no longer works.

Any suggestions as to what might be causing this and/or how we can get it working properly?

0 0

replied on April 20, 2020

I'm not sure if this is the reason, but you shouldn't be loading the script twice. You can add the two mask creation calls to the same function that's called when it's loaded:

$(document).ready(function() {
  $.getScript('http://ServerName/Forms/js/jquery.mask.min.js', function() {
    $(".ssn input").mask("999-99-9999"); //SSN Mask
    $(".phone input").mask("(999)999-9999"); //Phone Number Mask
  });
});

1 0

View 7 previous replies

replied on April 20, 2020

Thanks for the response Jim! I'm brand new to js so this is all foreign to me. I appreciate the advice. I've since updated our code to match what you provided, changing "ServerName" to ours, and I'm still not having luck with it.

0 0

replied on April 20, 2020

It's possible it's not loaded in time before you test it. This will give you a popup alert once it has loaded:

$(document).ready(function() {
  $.getScript('http://ServerName/Forms/js/jquery.mask.min.js', function() {
    alert("jQuery Mask was loaded.");
    $(".ssn input").mask("999-99-9999"); //SSN Mask
    $(".phone input").mask("(999)999-9999"); //Phone Number Mask
  });
});

If it's taking a while, then use the GitHub link instead of your local copy: https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/dist/jquery.mask.min.js

0 0

replied on April 20, 2020

I feel like that helped! I didn't get the alert when using our local copy, even after waiting a few minutes, but got it almost instantly when using that GitHub link. Even still, no masking is occurring for me... :( Once again, I appreciate your help Jim!

0 0

replied on April 20, 2020

This may sound obvious, but you do have "ssn" in the custom CSS classes on your SSN field, right? And likewise for the phone number?

0 0

replied on April 20, 2020

"css" and "phone", yes sir!

0 0

replied on April 22, 2020

Alright, quick update: The masking still doesn't work while filling out the form, which is where the applicant will see it and where we'd like the masking to take place. However, once a completed form makes its way to a task and is viewed from there, the masking works, but the only instance that would ever be used is if we needed to go in and edit an applicant's phone number or SSN.

So in short, it is working in some places, just not where we need it to.

0 0

SELECTED ANSWER

replied on April 22, 2020 • Show version history

Try this URL instead:

https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js

Chrome was blocking it for me for security reasons.

0 0

replied on April 22, 2020

Thank you Jim!!! That worked!

One final question for you: Does the CSS class of "phone" and the ".phone input" in the javascript simply need to match, or does it strictly need to be "phone"? The reason I ask is I previously had various CSS classes assigned to the phone number fields in my form to get them to fit 3 per line, 4 per line, etc.

Would I be able to assign a CSS class of "phonethreeperline" and then a separate line of javascript to match using the ".phonethreeperline input" naming convention?

0 0

replied on April 22, 2020

The best way to do that is to have two separate CSS classes, phone and threeperline, and apply them both to the field.

If you're unaware, you can assign multiple CSS classes to a field by separating them with a space:

0 0

replied on April 22, 2020

I 100% was unaware. That's so helpful, haha. Jim, thank you so very much for your help! This is the first form I've ever built in LF and it's an 18 page, 80+ rule monster with entirely too much CSS & Javascript that I've been struggling through, but you've been a tremendous help! Have a fantastic rest of your day and stay healthy!

1 0

Question

Question

jQuery Mask only working for one user, not all.

Answer

Replies

Sign in to reply to this post.