Skip to main content

Format MAC Address [JavaScript]

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 back-end; 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.
  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.
    2. Append a colon (:) after every second character.
  4. Update the field value with the new string.

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.

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


Popular posts from this blog

Balloon Flowers of 2014

We have Balloon Flowers (platycodon grandiflorus) in a half barrow pot. They are one of my favorite flowers that we have around the house. Simply because of how the flower forms. It starts as a small ball, which slowly grows into the shape of a hot air balloon, and once it opens it looks like it had exploded.

[gallery type="rectangular" link="file" ids="2611,2612,2622,2615,2613,2614,2616,2617,2618,2619,2610,2620,2621"]

I planted the flowers from the pictures above about seven years, ago.

SNOOZ: Sound. Sleep.

I was on the Snooz Kickstarter page today, revisiting the project’s details and timeline progress. The device, which is a white-noise generating machine, recently became available for pre-order. Snooz is meant to be an alternative to having a TV or a stationary fan running at bed time. In my case, I bought it for my wife so we can get the TV out of the bedroom.

Whilst on the comments page I read the following comment, posted recently by Ken Tran:

I'm not a fan of the new fabric design. ...
I must disagree. If you take a look at the original design, which is all plastic and no style, I must say it is fugly. It is all utilitarian - not something I rally want to look at or see when I walk into the room. The final design, seen on the right, is something that beacons to be explored, looked at, utilized.

I am a big fan of Bang & Olufsen. They use fabric from Kvadrat in their line of products. Incorporating soft materials like fabric or leather in something which is meant to be place…