I'm trying to write a JavaScript function that would cover the validation of all the input elements of the type="time". I am looking at the documentation of jQuery Validate but I'm only finding examples where the validation is bound on an id or name property. Is there a way to do this globally?

I want to make sure that a time is always of the format hh:mm. I have found a function that will validate my time (see below). When this function returns false, I would invoke an addError() function to add an error to the form. I'm not sure how to do this.

// Check is the input is a valid time
function formatTime(time) {
    var result = false, m;
    var re = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;
    if ((m = time.match(re))) {
        result = (m[1].length == 2 ? "" : "0") + m[1] + ":" + m[2];
    }
    return result;
}

// Trigger the validation on the onBlur event
$("input[type=time]").blur(function () {
    var value = formatTime($(this).val());
    if (value == false) {
        addError($(this));
    }
});

Edit1: It seems like my copy/paste skills aren't that good. In formatTime() I return the time if the format is valid and false if not.

I'm trying to write a JavaScript function that would cover the validation of all the input elements of the type="time". I am looking at the documentation of jQuery Validate but I'm only finding examples where the validation is bound on an id or name property. Is there a way to do this globally?

I want to make sure that a time is always of the format hh:mm. I have found a function that will validate my time (see below). When this function returns false, I would invoke an addError() function to add an error to the form. I'm not sure how to do this.

// Check is the input is a valid time
function formatTime(time) {
    var result = false, m;
    var re = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;
    if ((m = time.match(re))) {
        result = (m[1].length == 2 ? "" : "0") + m[1] + ":" + m[2];
    }
    return result;
}

// Trigger the validation on the onBlur event
$("input[type=time]").blur(function () {
    var value = formatTime($(this).val());
    if (value == false) {
        addError($(this));
    }
});

Edit1: It seems like my copy/paste skills aren't that good. In formatTime() I return the time if the format is valid and false if not.

• javascript
• jquery
• validation
• jquery-validate

• 3 You are not returning any value/result from formatTime(time). – Dhaval Marthak Commented Aug 1, 2013 at 13:08

4 Answers 4

Quote OP:

"I am looking at the documentation of jQuery Validate but I'm only finding examples where the validation is bound on an id or name property. Is there a way to do this globally?"

Yes there is. Rules can also be applied by using the .rules('add') method, and this method can be attached to any legal jQuery selector. To use this method on more than one element, you must wrap it inside of the jQuery .each() method. (Also note, even though you're not using the name attribute, each input must contain a unique name.)

$(document).ready(function() {

    $('#myform').validate({  // initialize the plugin on your form
        // any rules and/or options
    });

    $('input[type="time"]').each(function() {
        $(this).rules('add', {
            required: true,
            // another rule, etc.
        });
    });

});

Working DEMO: http://jsfiddle/g8YFa/

See this answer for plete info about adding rules using this plugin.

You want to declare a custom validation method to validate the time format.

$.validator.addMethod('correctTimeFormat', function (value, element) {
    var result = false, m, regex = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;

    if (m = value.match(regex)) {
        result = (m[1].length === 2 ? '' : '0') + m[1] + ':' + m[2];
    }

    return result;
}, 'Invalid time format.');

And then, require that custom validation method for all input time fields.

$('input[type="time"]').validate({
    rules: {
        value: { correctTimeFormat: true }
    }
});

// Check is the input is a valid time
function formatTime(time) {
    var result = false, m;
    var re = /^\s*([01]?\d|2[0-3]):([0-5]\d)\s*$/;
    if ((m = time.match(re))) {
        //Well it seems like its valid lets return true!  
        return true;
    }else{
       //Well it seems like this is invalid return false!  
        return false;
    } 
}

You have to return the value true/false from formatTime() function. So that it will set on your "var value = formatTime($(this).val());" declaration!