Currency Textbox

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

• Ability to set the Currency ISO Code to specify the needed validation.
• Instant character validation on keyup and blur.
• Regular expression validation upon submit.
• Regular expression validation upon submit. The "pattern" attribute is set dynamically according to the Currency 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 CSS and Script stuff are in place on a website, any page can implement the Currency Textbox by simply setting the input element's class attribute to "currencyTextbox" 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="txtUsdCurrency">USD Amount:</label>
    <input type="text" id="txtUsdCurrency" class="currencyTextbox" 
        maxlength="14"
        required 
        data-currencyIsoCode="USD"
        data-formGroup="formAuthenticate" 
        data-parameterName="singleItem" />

    <label for="txtEurCurrency">EUR Amount:</label>
    <input type="text" id="txtEurCurrency" class="currencyTextbox" 
        maxlength="14"
        required 
        data-currencyIsoCode="EUR"
        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