National Identification Textbox (social security)

As part of a new UI library, I have created a National Identification Textbox (social security, social insurance, etc.) in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The National Identification 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.
• 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 National Identification Textbox by simply setting the input element's class attribute to "nationalIdentificationTextbox" 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="txtUsSsn">U.S. Social Security Number:</label>
    <input type="text" id="txtUsSsn" class="nationalIdentificationTextbox" 
        required 
        placeholder="e.g. 123-12-1234"
        data-countryIsoCode="US"
        data-formGroup="formAuthenticate" 
        data-parameterName="singleItem" />

    <label for="txtCaSin">Canada Social Insurance Number:</label>
    <input type="text" id="txtCaSin" class="nationalIdentificationTextbox" 
        required 
        placeholder="e.g. 123-123-123"
        data-countryIsoCode="CA"
        data-formGroup="formAuthenticate" 
        data-parameterName="" />  

    <label for="txtDoCn">Dominican Republic Cédula Number:</label>
    <input type="text" id="txtDoCn" class="nationalIdentificationTextbox" 
        required 
        placeholder="e.g. 123-1234567-1"
        data-countryIsoCode="DO"
        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