Welcome, Guest
  • Page:
  • 1
  • 2

TOPIC: Input Masking

Input Masking 2 years, 3 months ago #11796

It is possible to do input masking on a text field? Would like to mask a phone input so the users don't input dashes with the numbers. Input should look like this : (___)___-____.
  • janetweber
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
  • Karma: 0
Last Edit: 2 years, 3 months ago by janetweber.

Re:Input Masking 2 years, 3 months ago #11902

I would also like to know how this can be accomplished. Is this a validation rule that we would need to write? Where would this go?
  • cebby
  • OFFLINE
  • Senior Boarder
  • Posts: 63
  • Karma: 1

Re:Input Masking 2 years, 3 months ago #11944

Hi there,

I have passed your question along to the tech team. Hopefully we'll have an answer for you soon!

Thanks,

Terry
Customer Care
  • terrywmu
  • OFFLINE
  • Administrator
  • Posts: 510
  • Karma: 8

Re:Input Masking 2 years, 2 months ago #12235

I wanna this feature to!
I try input this mask many different ways, no sucess for me... =/

try this:
put the js mask code in the faciforms.js

function mask()
{
$(".cf_fone").mask("(99) 9999-9999", {placeholder: "_"});
}

cf_fone is the name of the fone field.
but dont work...

So I try this:

put this code in other file mask.js

$(document).ready(function()
{
$(".cf_fone").mask("(99) 9999-9999", {placeholder: "_"});
}

the header in index.php was the path to import this js file to the page...dont work to!!!

So I try this php code in the actions script panel (custom mode) of the cf_fone field:
function mask(f){
cf_fone='';
var val =f.value.split('');
for(var i=0;i<val.length;i++){
if(i==0){val[i]='('+val[i]}
if(i==2){val[i]=val[i]+')'}
if(i==5){val[i]=val[i]+'-'}
cf_fone=cf_fone+val[i]
}
f.value=cf_fone;
}

Someone please help me!
  • johnlock86
  • OFFLINE
  • Fresh Boarder
  • Posts: 5
  • Karma: 0

Re:Input Masking 2 years, 2 months ago #12654

It almost seems like these need to be new field types or if not controlled at input, at least forced prior to submission with validation rules.

Can we copy the email validation rule and make the format what we want. For example, I've got issues with both dates and phone numbers in a form I've developed.

While these don't mask the input, it you put the format in the value field for a phone number as ###-###-#### and include the following validation script (I called it ff_validphone) the user will get an error until they enter the proper format. Note that "#" are not valid values in my validation script, so that won't get entered into the DB, only the correct number string would.

function ff_validphone(element, message)
{
    var check =
    /^([0-9]{3})+\-([0-9]{3})+\-([0-9]{4})+$/;
    if (!check.test(element.value)){
        if (message=='') message = element.name+" is not valid phone format, please use ###-###-####.\n";
        ff_validationFocus(element.name);
        return message;
    } // if
    return '';
} // ff_validphone


If you wanted to make your format (###)###-####, you would use a validation that looks like this:

function ff_validphone2(element, message)
{
    var check =
    /^([(]{1})+([0-9]{3})+([)]{1})+([0-9]{3})+\-([0-9]{4})+$/;
    if (!check.test(element.value)){
        if (message=='') message = element.name+" is not valid phone format, please use (###)###-####.\n";
        ff_validationFocus(element.name);
        return message;
    } // if
    return '';
} // ff_validphone2
  • cebby
  • OFFLINE
  • Senior Boarder
  • Posts: 63
  • Karma: 1
Last Edit: 2 years, 2 months ago by cebby.

Re:Input Masking 2 years, 2 months ago #12658

OK, slight problem with this...

I added my validation to all of my phone fields (required and not required). It is now treating my non-required fields as required when I had this validation enabled. (Even though "required" isn't checked)

Is there something I can add to the validation script to only invoke this validation when the required box is checked?
  • cebby
  • OFFLINE
  • Senior Boarder
  • Posts: 63
  • Karma: 1
  • Page:
  • 1
  • 2
Moderators: TheMuffinMan, ForumSupport
Time to create page: 0.64 seconds

Facebook Discount - 40% Off!

Fans of our Facebook page here are entitled to get a 1-year-subscription for the price of a 6-months!

Steps to take:

  • Become a fan on Facebook (Like) here
  • Purchase a 6-months-subscription from here
  • Write a quick email to This email address is being protected from spambots. You need JavaScript enabled to view it. with your username and prove of your like and we'll upgrade to the 1-year-subscription

Joomla!® Forms Discount - 40% Off!

Already purchased a forms extension from a different vendor but your requirements changed and now you need a forms extension that is capable of more than just the standards? We help you to keep the costs for a change under control: Get a 40% discount on our professional membership plan! -- meaning timely unlimited access to all current and future commercial extensions, breezingforms themes & apps and Joomla!® templates at crosstec.de, including 1 year of support -- without any website limitations -- Just prove that you previously purchased another forms extension for Joomla!® from a different vendor and you are qualified.

Steps to take:

  • Purchase a 1-year-subscription from here
  • Write a quick email to This email address is being protected from spambots. You need JavaScript enabled to view it. with your username and prove of the purchase for the other form vendor and we'll upgrade to the professional-subscription

About

Crosstec GmbH & Co. KG

Bergisch-Gladbacher-Str. 829

51069 Cologne, Germany

Imprint