Validate Time Entry with Javascript

I was cleaning up a web form that had a textbox for the user to enter a time value. The thing I don’t love about using a textbox to capture a time value is that there’s no validation. The user might enter a bad value and not realize it, and I’d rather let them know right away rather than displaying a message after they try to submit the form.

Surely there’s something we can do with javascript and regular expressions to create an intuitive experience for the user, right?

Format Checkin’ Regular Expression

The first thing we’re going to need is a regular expression that can be used to determine if an entry is valid or not. I decided to use a pair: one for standard time and one for military time.

function validateTime(time) {
    if (!time) {
        return false;
    }
    var military = /^\s*([01]?\d|2[0-3]):[0-5]\d\s*$/i;
    var standard = /^\s*(0?\d|1[0-2]):[0-5]\d(\s+(AM|PM))?\s*$/i;
    return time.match(military) || time.match(standard);
}

Make Red When Invalid

Now that we have a way to determine if an entry is valid, we need to decide how to give that feedback to the user. My first thought was to use the input control’s keyup event to check the value and make the text red if it doesn’t match.

<input type="text" class="warnIfInvalid" />
$(new function () {
    $('.warnIfInvalid').on('keyup', function () {
        $(this).css('color', 'black');
        if (!validateTime($(this).val())) {
            $(this).css('color', 'red');
        }
    });
});

Change to Default When Invalid

The color feedback is nice, but what if our field is a required value? If the user doesn’t enter anything, there is nothing to let them know they did something wrong. So, my second idea was to use the input control’s blur event to force a default value if the user enters a blank or invalid value.

<input type="text" class="required" value="12:00 AM" />
$(new function () {
    $('.required').on('blur', function () {
        if (!validateTime($(this).val())) {
            $(this).val('12:00 AM');
        }
    });
});

Do Both!

I didn’t like simply changing the user’s value to a default value without letting them know that I’m about to do that. For example, my regular expression won’t match a standard time that doesn’t have a space between the minutes and AM/PM. We can combine both techniques described above to give the user feedback as they type but change their bad input to a default if they enter something invalid. (Note that I manually trigger the keyup event after changing the invalid value to my default value.)

<input type="text" class="required warnIfInvalid" value="12:00 AM" />
$(new function () {
    $('.required').on('blur', function () {
        if (!validateTime($(this).val())) {
            $(this).val('12:00 AM');
            $(this).keyup();
        }
    });
    $('.warnIfInvalid').on('keyup', function () {
        $(this).css('color', 'black');
        if (!validateTime($(this).val())) {
            $(this).css('color', 'red');
        }
    });
});

Live example can be found here: http://jsfiddle.net/adamprescott/Q9b6d/

My House Burned Down

My daughter's room after the fire.
My daughter’s room after the fire.

It’s been a while since I’ve posted anything, but I have a good excuse: my house burned down. Before I tell my tale, you should know that everybody is okay, including my dog who was at the house when it happened. Everybody in our lives has been incredibly generous and supportive. We’re settled into a temporary home while our house is being rebuilt. The whole experience has been quite surreal.

The Fire

I was at work, having a normal Tuesday morning. The day had started like any other day. My wife was up getting ready, I was taking the dog out and having breakfast, and my 10 month old daughter was sleeping. My wife left for work, and I took my daughter to daycare and went to work myself. Around 11 AM, my wife called me. She told me that our house was on fire and I needed to get there right away.

With a million thoughts racing through my head, I zipped across town. My house is at the back of a cul-de-sac, and I could see my street was packed with police cars, ambulances, and fire trucks. There were two big engines in the front yard spraying water. There was no way for me to know the extent of the damage, but it was clear that my house was no longer inhabitable.

A pair of firemen pulled me into an ambulance to ask me all kinds of questions. I assume this was all standard stuff as part of their investigation. What had I done that morning? Had I cooked anything? Did my wife use a curling iron? Did I leave the lights on? Shortly after that, my wife arrived, and they asked her all the same questions.

The First Night

When we left the scene, we felt like we had nothing. The only clothes we had were the ones we were wearing. The insurance company was going to pay for us to stay in a hotel until we could find temporary housing, but we opted to stay with some friends that lived nearby instead. Our daughter was scheduled to be at daycare for another few hours, so we made trips to Buy Buy Baby and Target to get everything we needed to get by for a few days.

We focused on our daughter first. It felt like registering for a baby shower, only we needed it all that day. So what’s everything you need to care for a baby? It’s a lot. Diapers and wipes. Stuff to wear: onesies, clothes, pajamas, socks. Stuff to eat: formula, food. Stuff to eat with: bottles, bowls, spoons, bibs. Stuff to clean stuff that was eaten with: bottle brush, drying rack. A Pack & Play with a quilted sheet and a white noise machine. A toy. A book. Good? Probably not, but good enough for one night.

Now it’s time for us. You know what you don’t want to do when your house just burned down? Shop. But you have to. Okay, but where to start? Something to wear tomorrow: jeans, a casual shirt, a zip-up hoodie, socks, underwear. Something to wear tonight: pajama pants. Some toiletries: toothbrush, toothpaste, deodorant. Cell phone chargers. Good? Probably not, but good enough for one night.

Going to sleep that night was hard. I was grateful to have friends that invited and welcomed us into their home without hesitation, but I wanted to be alone. My daughter was her usual happy self, and she made it easy to laugh and smile despite everything that had gone on that day. She went to sleep in her Pack & Play without a problem, so that was a great relief. After she went to bed, I was sad and uncomfortable. I wanted the quilt my mom made me and the slippers my wife gave me two Christmases ago. I wanted to be in my bed with my pillows, but I didn’t have a bed or pillows anymore.

The Next Day

The next morning, we met with the insurance company’s large loss adjuster and fire inspectors from the fire department and insurance company. The consensus among inspectors was that this was an electrical fire that started in the attic. I was relieved to learn that the fire wasn’t caused by something we did, and my wife was unsettled to learn that was nothing we could have done to prevent it.

The fire started in the attic above my daughter’s room. The cellulose insulation we had blown in several months ago was quite flammable, and the fire spread quickly in the attic above the second story. It burned through the roof which allowed the smoke to escape, so smoke damage on the first floor was remarkably minimal, or so I’m told. By the time the fire was extinguished, there was no roof or tresses on the second floor. The only remnant of furniture in my daughter’s room was the metal base from an ottoman. There was not even a trace of her dressers, desk, bookshelf, books, toys, or her crib. It’s really scary to think about how things could’ve gone differently if we had been home.

Cleanup Begins

I didn’t really know how I expected cleanup and recovery to happen, but I was surprised with how it did. The insurance company brought vendors to deal with the different types of contents: electronics, textiles, and “everything else.” All three vendors operate similarly: they inventory everything then take anything that looks salvageable out of the home, use their restoration processes to clean each item, and store the items in a warehouse until a new home is ready to receive them. Items that are left behind or unable to be restored to their pre-fire condition are added to a “total loss” list for the insurance company.

Now, when I say “everything,” I’m talkin’ EVERYTHING. They took all the obvious stuff like furniture, pictures, computers, books, and things on shelves and in drawers and cabinets, They also took a lot of unexpected things like kitchen appliances, riding lawnmower, and snow blower. (And everything else in the garage, actually.)

At this point, the entire contents of our home has been removed and is tucked away at various vendor locations. We don’t really have an idea of what will be saved and what will need to be replaced. All we know for sure is that anything that was upstairs is gone. We may not know about the rest for several months. I’m told that the vendors typically store the items until a new home will be available.

Our Temporary Home

The insurance company helped us find a condo with a 6-month lease that switches to month-to-month at the end of the 6 months. Their paying the landlord directly, so the inconvenience to us is minimal. They’re also paying for furniture rental, which is really cool. I again didn’t know what to expect but have been pleasantly surprised. We have a fully furnished home, complete with dishes, cookware, coffee pot, toaster, bedding & linens, and televisions. We’ve been there for about two weeks now, and it feels very home-like. It’s weird because it really does feel like home, but we don’t own any of it.

Reconstruction

The contents of our house have been removed, and we’re settled into our temporary home. All that’s left is to rebuild the house. We have a building contractor who will be working with the insurance company to determine exactly what needs to be done.  We already know that the second floor needs to be reconstructed from scratch, and the first floor needs to be taken down to studs. The entire house needs new electrical and, presumably, new heating & cooling and plumbing.

We are in no way excited about what has happened, but we’re optimistic about a happy ending with an improved, updated version of the house we loved and lost. We’ve been hearing estimates of 6-7 months, so we’re just planning on getting back to our home later this year.

Thanks to Everyone

The most surprising thing–aside from the fire itself–has been the amount of support we’ve received from friends, family, and our extended network of people we’ve never even met. Co-workers have collected donations, we’ve received care packages with clothes, gift cards, and toys for our daughter. It’s been overwhelming, and we’re so grateful for everything we’ve received from everyone.

We’re so thankful that the sequence of events leading up to the fire played out as they did. Nobody was home during the fire, and nobody was hurt. Our dog was home, but she was corralled in the kitchen, as far away from the fire as she could be, before being taken to the fire department. (And the women at the fire department let her spend the day in their office and took good care of her there!) We certainly lost some sentimental items, but most of what was lost can be replaced. Thank you, thank you, THANK YOU to everyone that’s helped us throughout this whole experience.