Ian Wade:
Hi there, I’m working on adding an input field to a page to capture a user’s SSN. If possible, I’d like to prevent the user from typing in any non-numeric characters. I took a look at the documentation and found this page about input types: https://docs.klai.studio/reference/components-overview/common/input#id-2.-available-input-types. I’ve set up my current input snippet accordingly, but it does not appear to do anything different from the “text” inputType. What is the expected behavior of the number inputType? Can it do what I am describing above, or do I need to create a custom validator calc? Please advise. Thanks
Delfs:
I woould use a cleave element like this:
Delfs:
back to your question, the inputType are standard HTML5 spec options
Delfs:
yep that works!
Delfs:
https://demodev.fmbetterforms.com/#/form/FR_00F57A05-4DC9-3D45-9C57-DCE7F12CD416?refresh=0.02221530245595349
to test
Delfs:
{
"BFName": "SSN",
"attributes": {
"formElement": {
"data-idbf": "idbf_e_ssn"
}
},
"label": "Social Security Number",
"model": "ssn",
"placeholder": "123-45-6789",
"styleClasses": "max-w-sm ",
"type": "cleave",
"fieldOptions": {
"blocks": [3, 2, 4],
"delimiter": "-",
"numericOnly": true
}
}
Ian Wade:
That’s awesome! Thanks so much for taking the time to write that up!