Phone Textbox (tel, telephone)

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 "tel" and the pattern attribute. The Phone Textbox supports the following features:

• Native browser support, if available.
• Ability to set the Country ISO 3166-1-alpha-2 code to specify the needed validation.
• Instant character validation on keyup and blur.
• Optional phone extension.
• Optional toll-free phone number formatting (e.g. 1-800-555-5555).
• 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 tel type will be used.
  • Simple Implementation

The Demo

The Markup

Just a basic input element, with a normal type attribute of "tel" and some custom data (data-*) attributes to allow feature customization. Once the Script stuff is in place on a website, any page can take advantage of this Phone Textbox by simply setting an input's type attribute to "tel" and setting the desired optional custom data attributes. If native browser support is available, then the browser implementation of the control will be used in addtion to the onkey up and pattern validation.

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="txtPhone1">Phone #1:</label>
    <input type="tel" id="txtPhone1" style="width:500px;"
        required 
        placeholder="Regular and toll-free number with optional extension."
        data-countryIsoCode="US" 
        data-allowExtension="true"
        data-useTollFreeFormatting="true"            
        data-formGroup="formAuthenticate" 
        data-parameterName="singleItem" />

    <label for="txtPhone2">Phone #2:</label>
    <input type="tel" id="txtPhone2" style="width:500px;"
        required 
        placeholder="Regular and toll-free number, but extension not allowed."  
        data-countryIsoCode="US" 
        data-allowExtension="false"
        data-useTollFreeFormatting="true"          
        data-formGroup="formAuthenticate" 
        data-parameterName="" />

    <label for="txtPhone3">Phone #3:</label>
    <input type="tel" id="txtPhone3" style="width:500px;"
        required 
        placeholder="Regular number with optional extension, but no toll-free formatting."  
        data-countryIsoCode="US" 
        data-allowExtension="true"
        data-useTollFreeFormatting="false"          
        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