New Plugin - Input Formatter

Hi @dambusmedia! This is an awesome plugin, and really helpful for credit card UX. I wanted to bring up a bug I found:

As you can see, even though the value is being stored, everything after the first delimiter looks like it’s being erased (tab or clicking out). This only happens the first time, and re-typing the value out will keep it there.

Tested Chrome, Firefox, set as a credit card format.

Thanks!

Hi @callen.hedglen, I can’t access the link you’ve shared, can you change the permissions?

Hi @dambusmedia! Apologize for the even later response, and forgetting to change the permissions. I’ve made the link public, so you should be able to see the screen recording now.

Thanks!

Hi @dambusmedia

I’ve been using your Input formater plugin these last days, (good work btw!) but it seems that today when I tried it on mobile it was not working… It worked previously, I don’t know what might be the cause. I didn’t change anything on my side…

Thanks for your help!

Thank you!!! Very cool!

@dambusmedia would you have any recommendation for sending a single “MM/YY” field to Stripe formatted correctly by chance?

I run into 1 problems: Separating the two values in the input according to the " / " delimiter

Hey @dambusmedia - thank you for this plug in. I have a couple of issues, hoping you can help:

  1. UPPERCASE - for an input text, what value needs to be in the “Custom Format” field? I tried using the “999” shown in the demo app, but cannot input any spaces.

  2. CANADIAN POSTAL CODE - our postal codes are letters and numbers in the format A9A9A9 - can this plugin be used in this situation?

Thanks man.

@dambusmedia
Is there a way to use this plugin inside a reusable element?

I’m receiving this error at runtime in chrome when attempting to do so.

x5:8 Uncaught ReferenceError: Cleave is not defined
    at HTMLDocument.eval (eval at m.create_code (x5:15), <anonymous>:3:174)
    at j (x5:8)
    at k (x5:8)

you have Prefix option, how can I add a Suffix ? thanks

1 Like

Just wanted to drop a thanks in here. Works great for credit card forms :slight_smile:

1 Like

@dambusmedia
I have two inputs in a popup. One input is visible on page load & the other one is visible when user select an option in a radio button(which is not visible on page load). How do I apply this plugin for it? It works well when i enable the input to “This element is visible on page load.” Any solution?

I’m trying to fix a bug, but it seems to be a problem with the imput formatter… I used a checkbox to change the imput formatter’s fields, but it doesn’t work the way I wanted.

This is the original appearance, the way I want it to look if the checkbox isn’t checked
Appearance

As you can see, is working just fine:

So I added this condition to the case “if the checkbox is checked” as you can see:

But the result should be something like 445.667.998-83, but the actual result is something like 555.555.55/-84, as you can se in the next image:

Is there any thing wrong or is something wrong with the plugin?
Thanks for your help!

As you can see, if I check the checkbox the input changes its formatting, but in a wrong way! Isn’t it? am I wrong?

@dambusmedia I am having some issues with the plugin and trying to wrap my head around how it is supposed to work.

I get different results in different apps, despite the settings on the elements all being the same ( in fact I just copied them )

In one app I get the pre-fix format I would like, but there are some strange things going on

inputformatter1

So, it looks like on page load it is working, but when user clicks out of the input, the prefix is removed and I get these two different suggested options in a drop down from the input element

This is the set up of the two elements on page

Then in another test app

I get this behavior

format2

As mentioned the elements have the same set up as they are just copies

Here is a link to the editor of the test app in which on page load the prefix isn’t visible

Any ideas of what I am doing wrong? Also, anyway to remove the dropdown suggestions?

Hey @boston85719

Did you try this

New Input Formatter Video Tutorial 📺 - Toolit Kit Plugin

3 Likes

@AliFarahat I had not…I had seen the post a while back and forgot about it…thanks for reminding me. I will go through the tutorial and try to get it put together.

1 Like

@AliFarahat thanks again for reminding me of the toolit plugin

Just went through your tutorial and have successfully got an input working the way I need.

2 Likes

I keep having issues with this plugin. Anytime I have more than one on a page I get an error and they don’t work. Other issues are if the plugin is not in the same container as the input element it won’t work either, so if the plugin is on page and input is in a group it doesn’t work.

Has anybody had success using more than one of these on a page? If so, what is the magic trick?

I’ve tried to put the input element and the plugin into a group together for each instance on the page, but that doesn’t work either for me, only one will work successfully while the others throw errors.

Also anybody figure out how to not allow the plugin to affect the “collapse height when hidden” function on groups it is stored in? It really throws the design of the page off since this plugin element is so large and we don’t have an ability to make its height and width smaller so that it can not affect design…it would be great to set the height and width to 1 and 1 so it is essentially “hidden” and wouldn’t affect design.

1 Like

This is an amazing contribution to the Bubble community, thank you so much!

Does anybody get this error?

The plugin Input Formatter / element Input Formatter threw the following error: UnexpectedError Expected a number, but got a string (original data: “.”) at I (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/57867c6bb75321b36c333945be73855fb07475585c9ebe1a457ea68d93e92a89/xfalse/x7:9:598204) at Object.JS_to_bubble (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/57867c6bb75321b36c333945be73855fb07475585c9ebe1a457ea68d93e92a89/xfalse/x7:9:611772) (please report this to the plugin author)

I actually want the input capitalized and accept “.” “,” etc.
Can someone help me on this?