E-mail Textbox

As part of a new UI library, I have created a custom server control that creates the markup for a simple textbox using the the new HTML5 input type of "email" and the pattern attribute. The E-mail Textbox supports the following features:

• Native browser support, if available.
• 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
  • Future Compatibility: If natively supported by the browser, the new HTML5 input email type will be used.
  • Simple Implementation

The Demo

The Markup

Just a basic input element, with a normal type attribute of "email".

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="txtEmail">E-mail Address:</label>
    <input type="email" id="txtEmail" 
        required
        placeholder="e.g. user@domain.tld" 
        data-formGroup="formAuthenticate" 
        data-parameterName="emailAddress" />

    <div class="formButtonWrapper clearFix">
        <input type="submit" class="ajaxFormPost buttonStrong" value="Submit"
            data-formGroup="formAuthenticate" 
            data-serviceRequestUrl="/WebServices/AjaxFormTestClientService.svc/EmailAddressTestSubmit" 
            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 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