URL 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 new HTML5 input type of "url" and the pattern attribute. The URL Textbox supports the following features:

• Native browser support, if available.
• Regular expression validation upon submit. The "pattern" attribute is set dynamically.
• 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 url type will be used.
  • Simple Implementation

The Demo

The Markup

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

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="txtUrl">URL:</label>
    <input type="url" id="txtUrl" size="30" 
        required
        placeholder="e.g. http://www.domain.tld"
        data-formGroup="formAuthenticate" 
        name="Value" />
            
    <div class="formButtonWrapper clearFix">
        <input type="submit" class="ajaxFormPost buttonStrong" value="Submit"
            data-formGroup="formAuthenticate" 
            data-serviceRequestUrl="..." 
            data-successFunction="successFormTest1"
            data-confirmActionMessage=""
            data-processingMessage=""
            data-overlayWindowWhileProcessing="true" />
    </div>
</div>

The Script

//Enable URL Textbox(es)
$(parentElementSelector + " input[type='url']").each(function () {
    //Build and assign the "pattern", if not already there.
    if (!isAttrDefined($(this).attr("pattern")) || $(this).attr("pattern").length == 0) {
        var patternValue = "/^(((ftp|http|https):\\/\\/[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4})|((ftp|http|https):\\/\\/[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.