I am currently working on a project which will allow users to register their Wi-Fi enabled, non-web browser enabled, devices on the network. These are devices like printers, Apple TV, and Xbox*. One of the data points that have to be collected from the user is the device MAC address. The project customer wants that address to be properly formatted when they see it in the support ticket.

We have several options. We can format the address either on the back end after the form has been submitted, or we can format it on the front end via a separate text field for each character pair, but that is too many fields to handle. A better solution is to use a single field and format the user input at the time of input or upon submit. In those cases, the former is better because the data will already be formatted when the overall form input is being validation after the user clicks the “Submit” button.

We are going to format the user input as it is being provided, thus having proper data when validated upon submit; when the request is being processed on the backend; and in the resulting support ticket.

Out function is going to perform the following actions:

1. Receive the user input as the form field object. I will explain below.
2. Change all letters from the object value to upper case:
   a1:B2:C3.45:dE-6f => A1:B2:C3.45:DE-6F
3. If said value string is less than a complete MAC address (17 characters):
   1. Remove all non-alphanumeric characters. This is going to remove any delimiters the user might use:
      A1:B2:C3.45:DE-6F => A1B2C345DE6F
   2. Append a colon (:) after every second character:
      A1B2C345DE6F => A1:B2:C3:45:DE:6F
4. Update the field value with the new string, a proper looking MAC address – AB:CD:EF:12:34:56.

function formatMacAddress(userInput) {
    var macAddress = userInput || null;
    
    if (macAddress !== null) {
        var deviceMac = macAddress.value;
        
        // Change all letters to upper case
        deviceMac = deviceMac.toUpperCase();
        
        // Input string should be one less in lenght than a qualified MAC address (17)
        if (deviceMac.length >= 3 && deviceMac.length <= 16) {
            
            // Remove all but alphanumeric characters
            deviceMac = deviceMac.replace(/\W/ig, '');
            
            // Append a colon after every two characters
            deviceMac = deviceMac.replace(/(.{2})/g, "$1:");
        }
        
        document.getElementById(macAddress.id).value = deviceMac;
    }
}

In step 1 we wanted to receive the field object instead of just the input because on line 20 we use the “id” property of the object to update the field with the formatted string.

Below is one way to implement the MAC address formatting script.

function formatMacAddress(userInput) {
    var macAddress = userInput || null;
    
    if (macAddress !== null) {
        var deviceMac = macAddress.value;
        deviceMac = deviceMac.toUpperCase();
        
        if (deviceMac.length >= 3 && deviceMac.length <= 16) {
            deviceMac = deviceMac.replace(/\W/ig, '');
            deviceMac = deviceMac.replace(/(.{2})/g, "$1:");
        }
        
        document.getElementById(macAddress.id).value = deviceMac;
    }
}

function fieldControl() {
    var macAddressField = document.getElementById('macaddress');
    
    // Make sure field object exists
    if (typeof macAddressField !== 'undefined') {
        
        // Attache event listner
        macAddressField.addEventListener('keyup', function() {
            
            // Allow user to use the backspace key
            if (event.keyCode !== 8) {
                
                // Format field value
                formatMacAddress(this);
            }
        }, false);
    }
}

// Attache formatter function' event listner after page is done loading.
window.onload = fieldControl();

Note line 27! We are not going to invoke the “formatMacAddress” function when the user is pressing the backspace key.

___

* As of this writing Microsoft announced within the last week that with their upcoming Xbox One update, they are going to enable support for Wi-Fi authentication via the Xbox web browser.