NQU Plugins
Plugin documentation

Better Input Validation Templates

Better Input Validation Templates formats Bubble inputs as users type, then publishes whether the current value is complete and valid for the selected template. Use it for common structured inputs such as email, URLs, dates, times, phone numbers, postal codes, card-style fields, CPF/CNPJ, CEP, IBAN, UUIDs, IP addresses, colours, and other fixed input formats.

Demo: https://bubble-essential-plugins.bubbleapps.io/version-test/input-mask

Better Input Validator demo

Quick start

  1. Install the plugin in your Bubble app.

  2. In Settings > General, enable Expose the option to add an ID attribute to HTML elements.

  3. Add a normal Bubble Input to the page.

  4. Give that input an ID attribute, such as phone_input.

  5. Add the Better Input Validator element to the same page.

  6. Set Input ID attribute to the ID of the input you want to format.

  7. Choose a Template.

  8. Preview the page and type into the input.

The plugin element does not replace Bubble's Input element. It attaches formatting and validation behaviour to an existing input by ID attribute.

Better Input Validator element

Use Better Input Validator for new apps and new workflows.

Better Input Validator properties in the Bubble editor

Input ID attribute

The ID attribute of the Bubble input that should receive the template.

This field is required. The target input must exist on the same page and must be visible when the plugin element runs.

Template

Choose the format to apply to the target input.

Options:

  • Custom

  • Email

  • URL

  • Date DD/MM/YYYY

  • Date MM/DD/YYYY

  • Date YYYY-MM-DD

  • Time HH:MM 24-hour

  • Time HH:MM:SS 24-hour

  • Credit card number

  • Credit card expiry MM/YY

  • CVV 3 digits

  • CVV 4 digits

  • US phone

  • US ZIP code

  • US ZIP+4

  • US SSN

  • Canada postal code

  • UK postcode

  • UK sort code

  • IBAN

  • IPv4 address

  • IPv6 address

  • MAC address

  • Hex color

  • UUID

  • CPF

  • CNPJ

  • CPF/CNPJ

  • CEP

  • Brazil phone

Default: Custom.

The template validates the entered format. It does not verify that a phone number, postal code, card number, IBAN, URL, SSN, address, IP address, or other value exists in the real world.

For CPF, CNPJ, and CPF/CNPJ, the validator checks the Brazilian document check digits.

For IBAN, the validator checks the IBAN structure and checksum. It does not verify that the bank account exists.

For URL, the validator accepts http:// and https:// URLs, and also accepts normal domains without a scheme, such as example.com/path. It does not check whether the page is reachable.

For IPv6 address, the validator supports full and compressed IPv6 addresses, such as 2001:db8::1 and ::1.

Custom template

Used when Template is Custom.

Template characters:

  • 0: required digit

  • 9: optional digit

  • S: letter

  • A: letter or number

  • H: hexadecimal character

Common examples:

  • 00/00/0000 for dates

  • 00:00 for time

  • (000) 000-0000 for US phone numbers

  • 00000-000 for Brazilian CEP

  • AAAA-0000 for mixed letter/number codes

Default: blank.

Reverse custom template

Applies a custom template from right to left.

This only affects Template set to Custom.

Default: unchecked.

Show numeric keyboard

Sets the target input type to tel, so mobile browsers show a numeric keyboard.

Use this for numeric templates such as phone, date, time, card, CPF/CNPJ, or CEP. Leave it unchecked for templates with letters or punctuation, such as Email, URL, Canadian postal codes, UK postcodes, IBAN, IPv6 addresses, MAC addresses, hex colours, and UUIDs.

Default: unchecked.

Exposed states

The Better Input Validator element exposes these states:

  • Input value: the formatted value currently shown in the target input.

  • Raw value: the input value without template punctuation such as spaces, dashes, slashes, or brackets. For validation-only templates such as Email, URL, IBAN, UK postcode, and IPv6 address, this is the normalized text value used for validation.

  • Template is complete: yes when the current input value has enough characters for the selected template.

  • Template is valid: yes when the current input value is complete and passes the selected template's format validation.

  • Selected template: the template currently configured on this element.

Events

The Better Input Validator element can trigger these workflow events:

  • Input value changed: the target input value changed after the validator attached.

  • Input became valid: the target input changed from invalid to valid.

  • Input became invalid: the target input changed from valid to invalid.

Example workflows

Save only when a date is valid

  1. Add a Bubble Input to the page.

  2. Set its ID attribute to date_input.

  3. Add the Better Input Validator element.

  4. Set Input ID attribute to date_input.

  5. Set Template to Date DD/MM/YYYY.

  6. In your save workflow, only continue when Better Input Validator's Template is valid is yes.

Validate an email before continuing

  1. Add a Bubble Input to the page.

  2. Set its ID attribute to email_input.

  3. Add the Better Input Validator element.

  4. Set Input ID attribute to email_input.

  5. Set Template to Email.

  6. Only continue when Template is valid is yes.

Validate an IBAN

  1. Add a Bubble Input to the page.

  2. Set its ID attribute to iban_input.

  3. Add the Better Input Validator element.

  4. Set Input ID attribute to iban_input.

  5. Set Template to IBAN.

  6. Use Template is valid before saving or submitting the value.

Format and validate a CPF

  1. Add a Bubble Input to the page.

  2. Set its ID attribute to cpf_input.

  3. Add the Better Input Validator element.

  4. Set Input ID attribute to cpf_input.

  5. Set Template to CPF.

  6. Use Template is valid before saving or continuing.

Português: para CPF e CNPJ, o novo elemento formata o valor e valida os dígitos verificadores. Isso não consulta a Receita Federal.

Use a custom template

  1. Add a Bubble Input to the page.

  2. Set its ID attribute to code_input.

  3. Add the Better Input Validator element.

  4. Set Input ID attribute to code_input.

  5. Set Template to Custom.

  6. Set Custom template to AAAA-0000.

Legacy element

Existing apps may already use the older Input Mask - Legacy element. That element is still included for backwards compatibility, especially for Brazilian users relying on the old CPF/CNPJ, phone, CEP lookup, and captured value behaviours.

Use Input Mask - Legacy only when maintaining an existing page that already depends on it. For new work, use Better Input Validator.

Input Mask - Legacy properties in the Bubble editor

Legacy fields

The legacy element keeps its original behaviour:

  • Input ID attribute: target input ID.

  • Custom mask: old custom mask field.

  • Reverse mask: applies the old custom mask from right to left.

  • Preset mask: CPF/CNPJ, Landline/Mobile, or Off.

  • Show numeric keyboard: sets the target input type to tel.

Legacy element actions

The legacy element also keeps:

  • Lookup CEP: looks up a Brazilian CEP using ViaCEP and publishes address states.

  • Capture input value: reads another input by ID attribute and publishes it to the legacy Input value state.

Validate CPF/CNPJ action

The standalone Validate CPF/CNPJ workflow action is still available.

Field:

  • CPF/CNPJ value: CPF or CNPJ to validate. Formatting characters such as dots, slashes, and dashes are ignored.

Return value:

  • CPF/CNPJ is valid: yes when the value passes CPF or CNPJ validation, otherwise no.

Português: essa ação valida CPF ou CNPJ pelos dígitos verificadores. Ela ignora pontos, barras e hífens. Valores com tamanho diferente de CPF ou CNPJ retornam no.

Troubleshooting

The template does not attach:

  • Make sure the target Bubble input has an ID attribute.

  • Make sure Input ID attribute exactly matches the target input's ID.

  • Make sure the plugin element and the target input are visible at the same time.

  • If the input is inside a hidden group or popup, show that container before expecting the template to attach.

The value is complete but not valid:

  • Check whether the selected template has stricter validation than character count.

  • Dates, times, credit card numbers, IPv4 addresses, IPv6 addresses, CPF, CNPJ, IBAN, UK postcodes, Canadian postal codes, email addresses, and URLs have extra format checks.

  • For card numbers, Template is valid checks the Luhn number only. It does not confirm that the card is active or chargeable.

  • For IBAN, Template is valid checks the IBAN checksum only. It does not confirm that the bank account exists.

  • For URLs, Template is valid checks the URL format only. It does not confirm that the page exists.

  • For CPF/CNPJ, Template is valid checks the document check digits only. It does not query a government database.

The wrong template is used:

  • Check Template.

  • If Template is not Custom, Custom template is ignored.

  • Use Reverse custom template only with Custom.

The numeric keyboard does not appear on mobile:

  • Check Show numeric keyboard.

  • Make sure the target input is the one the user is actually focusing.

  • Browser keyboard behaviour can vary by device and operating system.

Limits

  • This plugin is web-only.

  • The template is applied in the user's browser to an existing Bubble input.

  • The plugin needs the target input's ID attribute.

  • The target input and plugin element must be visible at the same time for the template to attach.

  • Format validation is not the same as identity, address, payment, reachability, deliverability, or bank-account verification.

  • The plugin does not change Bubble privacy rules or server-side validation. Use workflow validation before saving important data.

Was this helpful?
Was this helpful?