Auto Format Zip Code In Adaptive Form

[#1]

I am working on developing Fragments for address and need to capture zip code in that. The requirement is to allow 5 or 9 digit zip code and it should be auto formatted.

I have tried below out of box display patterns for this and not able to fulfill the actual business requirement

text{99999-9999} - Working fine for 9 digit zip code but leaving "-" at the end when user enter 5 digit Zip code.

text{99999}|text{99999-9999} - Giving totally wrong format.

However for validation pattern I have used regular java script regex  "^\d{5}(\d{4})?$" and its fitting the bill. I am looking for solution to fix my display pattern problem.

[#2 · Accepted solution]

Instead of using OOTB display pattern you can use custom pattern and write your own regex. The script I wrote was keeping in view that you need both format 99999 and 99999-9999 as supported. As you described that user can also enter 999999999  which in-turn should be validated as 99999-9999 and should be displayed in that manner only.

In case you do not want to send the formatted date to other-system then you can just update it on pre-submit or create a hidden field which takes the value from the actual field but with no formatting. Thus read the hidden field value in another system.

[#3]

I just created below script, use it on field validate and see if this helps. You can handle more scenrios, if required.

var a=this.value.match(/^[0-9]{5}([- /]?[0-9]{4})?$/);

var b=this.value;

if(a!==null)

   {

     if((b.substring(5)!=='-')&&(b.length==9))

       {

         this.value=b.substring(0,5)+'-'+b.substring(5,b.length);

        guideBridge.setFocus(first_name.somExpression);// set focus to some other form field

        guideBridge.setFocus(this.somExpression);// set focus back to current field

    }

     else

       {

         this.value=this.value;

       }

   }

Sample Test Case

I/ P: Result

12345: Success

12345-6789: Success

123456789: Converted to 12345-6789 and then passed

1234: Fail

123456: Fail

12345-33: Fail

Thanks,

Mayank

[#4]

Thank you Mayank. This resolves the front end issue. However the above code snippet changes actual value attribute of text field widget. The out box auto formatter will actually changes "formattedValue" of widget.  I have tried setting "formattedValue" value property and no succeeded in that since the property is read only for guideTexbox. I am reluctant to send actual value as formatted since another system is taking care of that after submitting the adaptive form.

I am interested to know what kind of regular expressions we can use in order to format a value . AEM is provided some out of box patterns to support phone ,zip code "text{99999-9999}" and social security number etc. Instead of using these out of box text formatters Can we use normal regular expression(s) as a value for display format property ?