Postal Code Textbox (zip code)

As part of a new UI library, I have created a Postal Code (Zip Code) Textbox in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Postal Code Textbox supports the following features:

• Ability to set the Country ISO 3166-1-alpha-2 code to specify the needed validation.
• Instant character validation on keyup and blur.
• Optional extended code (+4 format).
• Regular expression validation upon submit. The "pattern" attribute is set dynamically according to the Country ISO Code.
• Dynamic maxlength assignment.
• Fully integrates with the UI Library - Ajax Form feature.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Future Proof
  • Simple Implementation

The Demo

The Markup

Just a basic input element, with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the Script stuff is in place on a website, any page can implement the Postal Code Textbox by simply setting the input element's class attribute to "postalCodeTextbox" and setting the desired optional custom data attributes.

That sounds like a DRY solution to me (see UI Manifesto).

<div class="form legendLook horizontalFormLayout">
    <div id="hdivFormTest1ConfirmationMessage" class="confirmationMessageWrapper hide"></div>
            
    <label for="txtUsdZipCode">US Zip Code:</label>
    <input type="text" id="txtUsdZipCode" class="postalCodeTextbox" 
        required 
        data-countryIsoCode="US"
        data-allowExtended="true"
        data-formGroup="formAuthenticate" 
        data-parameterName="singleItem" />

    <label for="txtCanadaPostalCode">Canada Postal Code:</label>
    <input type="text" id="txtCanadaPostalCode" class="postalCodeTextbox" 
        required 
        data-countryIsoCode="CA"
        data-formGroup="formAuthenticate" 
        data-parameterName="" />          

    <div class="formButtonWrapper clearFix">
        <input type="submit" class="ajaxFormPost buttonStrong" value="Submit"
            data-formGroup="formAuthenticate" 
            data-serviceRequestUrl="/WebServices/AjaxFormTestClientService.svc/SingleItemTestSubmit" 
            data-successFunction="successFormTest1"
            data-confirmActionMessage=""
            data-processingMessage=""
            data-overlayWindowWhileProcessing="true" />
    </div>
</div>

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• Modernizr
  (used for Future Compatibility checks)
• UI Library - Ajax Form