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" 
        name="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>

The Script

//Enable E-mail Textbox(es)
$(parentElementSelector + " input[type='email']").each(function () {
    //Build and assign the "pattern", if not already there.
    if (!isAttrDefined($(this).attr("pattern")) || $(this).attr("pattern").length == 0) {
        var patternValue = "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/";
        $(this).attr("pattern", patternValue);
    }

    //Assign the "maxlength", if not already there.
    if (!isAttrDefined($(this).attr("maxlength")) || $(this).attr("maxlength").length == 0) {
        $(this).attr("maxlength", "200");
    }
});

The CSS

 
    Not applicable.