Limit zip code form field to 5 numeric characters

[wpomeroy]

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.

[wpomeroy]

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

[wpomeroy]

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]

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]

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

[#6]

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.

[wpomeroy]

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]

@_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]

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]

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.

[Sukrity_Wadhwa]

Hi @_Manoj_Kumar, Can you please help @wpomeroy further on this? Thanks!