Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Limit zip code form field to 5 numeric characters

wpomeroy
Level 2
Level 2

Is there a best practices way to do form field validation in ACC?  I would like to limit a zip code form field to 5 numeric characters and throwing an error message if the requirements are not met.  I've considered handling this via a split activity or JS but wasn't sure if there is a way to validate in the form activity itself.  Any insight would be appreciated.

10 Replies
Manoj_Kumar_
Community Advisor
Community Advisor

Hello @wpomeroy ,

 

You can change the data type in the schema to int.

To limit the length inform you can add a length attribute in the field.

length="5" 

 Thanks,

Manoj

wpomeroy
Level 2
Level 2

@Manoj_Kumar_ If i change the data type in the schema will that generate an error when the form is submitted?  My understanding was that the data would simply not write to the field. Also, on the length ="5", i assume you are suggesting that be added to the input field in the HTML of the form activity, correct?

Manoj_Kumar_
Community Advisor
Community Advisor
Now that you have mentioned the HTML, then i am assuming you are working on a webApp. In the web app you can change the input type to number and add maxLength to 5. If you are modyfing the input form the length attribute will be used. Also if data type if changed then it will throw a data type error.
wpomeroy
Level 2
Level 2
Hello @Manoj_Kumar_, Can you please provide additional direction on this? I tried this in both the input tag and the form properties and it does not seem to work. I can still enter non numeric characters and there appears to be no regulation to >4 and <5 characters.
wpomeroy
Level 2
Level 2
Hello @Manoj_Kumar_, Also, i'm not sure of the HTML standards to which the web form activities subscribe. Can you tell me if this could be included in the web form source? https://codepen.io/martenc/pen/gbMpgj
Darren_Bowers
Community Advisor
Community Advisor

Hi @wpomeroy - you can use a number of techniques to validate input in the HTML input form. Here is some examples: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#Built-in_form_validation_exampl...

Cheers

Darren

wpomeroy
Level 2
Level 2

Hey @Darren_Bowers, Do you have any examples that have worked for you? I've already tried this using examples similar to your hyperlink (https://codepen.io/martenc/pen/gbMpgj) as well as managing within the input field (i.e. pattern="\d{5,5}(-\d{4,4})?") and it appears that the web form either doesn't honor settings or breaks the script.

Darren_Bowers
Community Advisor
Community Advisor
I don't sorry. I usually Google around until I find what I need. You could try doing form submission-time validation. Do a simple regex on the field value and highlight the fields and present some error message if its not what you expect. Trying to limit input using patterns and key press handlers isn't always the easiest method. It can also end up in form abandonments if you get it wrong and people cant put something in the field. Cheers Darren
wpomeroy
Level 2
Level 2

Hello @Manoj_Kumar_ , I tried this as well.  While it does limit the field to a maximum of 5 characters and removes non-numeric characters, the error that is generated is not user friendly (it errors out on submission rather than performing validation) and it also does not limit less than 5 characters.  I will make this change if there is no other solution but this does not seem best practices from a UX perspective.  Thanks.