Question

Formatting in forms

Laserfiche Cloud Forms

Updated January 4, 2023

asked on October 6, 2020

I have the following javascript in our forms making all of the phone number fields default to a specific format:

$(document).ready(function () {
$(".Phone").on("change" , "input" , mask_num);
function mask_num(){
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js', function () {
$(".Phone input").mask("(999)999-9999");
});
}
});
This part works great, but many of those using our forms are not entering 10 digits. We tried specifying they enter a 10 digit number, but we still often only get 7 digits. I am trying to make it so they have to enter the 10 digit number but that it still automates the formatting. I have tried entering both $\d\d\d$ \d\d\d-\d\d\d\d and >=1000000000 & <=9999999999 as field constraints but receive an error when 10 digits are entered but not in the exact format (if they just enter 2083159944 instead of (208)315-9944, even though the javascript does correct the formatting). Any idea how I can keep the javascript formatting and require 10 digits? I imagine I can add something to my script, but I am not familiar enough with javascript to know what I need to add.

Thanks!

Amanda Payne

0 0

Replies

replied on October 6, 2020 • Show version history

Hi Amanda,

I use this snippet of JS instead. It doesn't rely on an external package and it doesn't allow users to enter more than 10 digits:

    function maskPhones() {
        $(".phone input").attr("placeholder", "ex (555) 555-5555");
        $(".phone input").on("input", function (e) {
            let x = e.target.value.replace(/\D/g, "").match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
            e.target.value = !x[2] ? x[1] : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
        });
    }
    maskPhones();

Just make sure to add the phone class to all your phone elements in the layout designer.

Then for a regex you can use this to make sure it matches the pattern:

$\d{3}$\s\d{3}\-\d{4}

By the way this site is great for testing regexes. It breaks down what your regex is saying, and highlights matches in a text field below your pattern. I barely make a regex without this site:

https://regexr.com/

4 0

replied on December 8, 2021

Brian, I love how this works dynamically (only allowing numeric input up to 10 digits) and thanks for the link to regexr it's a great tool.

0 0

replied on October 6, 2020

Thanks for the advice, Brian. I gave it a go. This is what I have in JS.

Here is my regex and css class.

I'm still receiving an error. :(

Amanda

0 0

replied on October 6, 2020

Amanda,

I am using the same jquery that you had in your first message, but I had copied the files locally to not have to go to a different site. I have my regular expression set to:

and this works for me.

The phone number auto formats and also makes sure the correct number of digits are entered.

1 0

replied on October 7, 2020

Try wrapping it in a block like this:

$(document).ready(function() {
// insert code here
});

I think your script is loading before the contents of the page are loaded, so when the script looks at the page and says, "Give me everything with the 'phone' class" those elements haven't loaded yet and it doesn't get anything back.

1 0

replied on January 3, 2023

Is there a way to adjust the function so this works on tables and collections?

0 0

replied on January 4, 2023

Angela,

You should be able to apply the css name on the advanced tab for the individual fields for the function to work.

0 0

replied on January 4, 2023

Unfortunately, when you add another row, the css coding is dropped.

Question

Question

Formatting in forms

Replies

Sign in to reply to this post.