TextBox type does not do anything. Bug?

The docs state:

The type property of a TextBox is a hint to the browser, which may constrain or suggest how to edit a text box (for example, only allowing digits in a number TextBox, or displaying a dial-pad when editing a tel TextBox).

However in practice this does not happen at all.
In the inspector the fields all have a type of “text”.

Tested on Safari.

It constrains me to numbers if I set type to number. So in that case, it worked for me (Chrome, FF).

Created a little test app: https://anvil.works/build#clone:QKNHRXAF3SUG7QFP=25M7LFGF43JSNX7FIMGCLYCG

It will show that none of the fields work in Safari and only the number field works in Chrome.

I think the same is true in FF as well. The docs don’t make any guarantees (they say type may be constrained), but yeah, I’ve only ever gotten the number type working in a constrained way. It would be nice if the type property worked fully in the main browsers.

Would be even nicer if we got real field validation in Anvil :wink: Something along the lines of the form-validation library but more integrated with the fields.
Would seem to be a common need in applications.

If there has not been a FR on that topic, you should start one. I’d give a “like”.

I remember tackling the validation problem a few years back. Before text fields got their type, possibly before Data Binding. Nice framework, able to notify users on a field-by-field basis of entry errors.

It was built around custom components.

  • The component provided both a wrapped text field and a hidden notification area, that would expand into view when needed.
  • Validators were plug-in functions that could be chained, customized, and composed. So were
  • “cleaners” (to remove junk pasted in from PDFs, such as currency signs, spaces, commas, tabs, … just before validation, so entry could include them)
  • formatters (to add them back in for display once the user left the field)
  • data converters (to convert text to/from int, float, date, time, … or your own custom type)

Alas, it’s not forward-compatible. It would never work, as-is, with the current field types. A number field does not accept formatting characters at any time. Pasting in a formatted number (e.g, “$12,345.67”) throws the entire string away. It doesn’t even preserve the digits! But if you leave the field type as text, instead of number, then the wrong keyboard pops up on mobile devices.

My library was a nice design at the time, but it doesn’t fit today’s underpinnings. I haven’t attempted to bring that library up-to-date. In the next month or two, I may have time to work on a modern version, but no guarantees.

2 Likes

Looking forward to it :grinning:

Hi @mjmare,

As the docs mention, TextBox types may constrain or suggest how to edit a text box, but this varies depending on the browser and what type of device is being used.

I have inspected the TextBox types in both FireFox and Chrome and the ‘number’ and ‘url’ fields are working as they should. I’ve fixed the issue with types ‘tel’ and ‘email’ - these changes will go live in the next few days :slight_smile:

If you’d like to raise a separate FR for full field validation on inputs in Anvil, please go ahead!

3 Likes

Per your suggestion, please see OnValidate event .

1 Like