TOPIC:

Input Masking 10 years 7 months ago #11796

  • Topic Author
  • janetweber
  • Offline
  • Fresh Breezer
  • Fresh Breezer
  • Posts: 1
  • Thanks: 0
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 : (___)___-____.

Please Log in or Create an account to join the conversation.

Last edit: Post by janetweber.

Re:Input Masking 10 years 7 months ago #11902

  • cebby's Avatar
  • cebby
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 68
  • Karma: 1
  • Thanks: 0
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?

Please Log in or Create an account to join the conversation.

Re:Input Masking 10 years 7 months ago #11944

  • terrywmu's Avatar
  • terrywmu
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 509
  • Karma: 8
  • Thanks: 9
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

Please Log in or Create an account to join the conversation.

Re:Input Masking 10 years 7 months ago #12235

  • johnlock86's Avatar
  • johnlock86
  • Offline
  • Fresh Breezer
  • Fresh Breezer
  • Posts: 5
  • Thanks: 0
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='('+val}
if(i==2){val=val+')'}
if(i==5){val=val+'-'}
cf_fone=cf_fone+val
}
f.value=cf_fone;
}

Someone please help me!

Please Log in or Create an account to join the conversation.

Re:Input Masking 10 years 6 months ago #12654

  • cebby's Avatar
  • cebby
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 68
  • Karma: 1
  • Thanks: 0
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

Please Log in or Create an account to join the conversation.

Last edit: Post by cebby.

Re:Input Masking 10 years 6 months ago #12658

  • cebby's Avatar
  • cebby
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 68
  • Karma: 1
  • Thanks: 0
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?

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: ForumSupport
Time to create page: 0.051 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!