Time validation (and comparing) using Javascript / JQuery

Question

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

Kelly Robins · Accepted Answer · 2009-08-07 13:45:28Z

3

This may be what you are looking for-

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

answered Aug 7, 2009 at 13:45

Kelly Robins

7,3236 gold badges46 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

redsquare · Accepted Answer · 2009-08-07 14:04:26Z

3

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.

edited Aug 7, 2009 at 14:04

answered Aug 7, 2009 at 13:44

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

1 Comment

Nick Over a year ago

Many thanks, I'll take a look at the validate plugin right away. Very good spot on missing the val() btw, oops! I'm not sure it's running the each though, since it didn't do anything, even when I tried 'alert(splittime[0]);' - sorry to be a pain

Mutation Person · Accepted Answer · 2009-08-07 14:02:33Z

1

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.

answered Aug 7, 2009 at 14:02

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

1 Comment

Nick Over a year ago

Many thanks! Just modified this a little and it's working an absolute treat now, thanks! $("#hoursavailable :text").each(function() { $this = $(this); // cache the object var splittime = $this.val().split(":"); if (splittime[0] > 22 || splittime[1] > 58) { $this.focus(); $.jGrowl('Please enter a valid date! Must be no greater than 23:59!', { theme: 'smoke' }); retVal = false; return false; } });

Fedir RYKHTIK · Accepted Answer · 2011-12-16 02:10:36Z

0

Synthesis from different methods to check for max & format together.

    var timeFieldValue = $(this).val();
    re = /^\d{1,2}:\d{2}([ap]m)?$/;
    if(timeFieldValue != '' && !timeFieldValue.match(re)) {
      alert("Invalid time format: " + timeFieldValue);
      $(this).focus();
      return false;
    }
    var splittime = timeFieldValue.split(":");
    if(splittime[0] > 23 || splittime[1] > 59) {
      alert('Please enter a valid time');
      return false;
    }

answered Dec 16, 2011 at 2:10

Fedir RYKHTIK

10k7 gold badges61 silver badges70 bronze badges

Collectives™ on Stack Overflow

Time validation (and comparing) using Javascript / JQuery

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related