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" 
        data-parameterName="singleItem" />
            
    <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, CSS, 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