Time validation (and comparing) using Javascript / JQuery

Question

Hi guys,

First of all apologise for creating my third Javascript question in as many days - I'm really trying to push myself in this field on this project, and feel my skills are developing at a fairly good rate thanks to my research and your fantastic help on here, particularly redsuqare!!

I've got a table where people can enter times, and have a mask in place where it'll check that the input is in the format 99:99 - which is great, but ideally I want to limit it to be no more than 23:59!

Here's the code I have at the moment, cobbled together the best I can, but unsurprisingly doesn't work...

$.each($('#hoursavailable tr td :checkbox'), function() {

    var $this = $(elem); // cache the object
    var $row = $this.closest('tr'); // find the nearest table row
    if($this.is(':checked')) {
     // do nothing!
    } else {
     $row.each(':text'),function() {
      var splittime = $(this).split(":");
      if(splittime[0] > 22 || splittime[1] > 58) {
       alert('please enter a valid date'); return false;
      }
     }
    }
});

Could also be worth noting that there are two inputs per row/tr - it'd be absolutely ideal if I could somehow compare the two, to ensure that the first one is before the second, but appreciate that could be even more beyond me than the current stuff :(

Thanks

Answer 1

I think all you need is the following change since your doing an each around the text inputs so you need to get the value out and split that.

$row.find(':text').each(function() {
            var splittime = $(this).val().split(":");
            if(splittime[0] > 22 || splittime[1] > 58) {
                    alert('please enter a valid date'); return false;
            }
});

However to save yourself re-inventing the wheel why not look into the validate plugin where you can configure regex expressions to deal with data validation.

Although I do appreciate hand rolling is also a good learning curve.

Answer 2

This may be what you are looking for-

http://www.the-art-of-web.com/javascript/validate-date/

Answer 3

You're going mad with your eaches when you really only need one

This ought to get you going with a few caveats as detailed below.

    $("#hoursavailable :checked").each(function() {
        var splittime = $(this).parents("tr").find(":text").val().split(":");
        if (splittime[0] > 22 || splittime[1] > 58) {
            alert('please enter a valid date'); 
            return false;
        }        
    });

I've assumed here that you only have one text box (hence .find(":text") on the parent. You could consider adding a class, but bear in mind that class selectors are slow.

There is no validation here, so you might want to add a little more, however the premise works.