jQuery Validation for all inputs of a given type

Question

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.

You are not returning any value/result from `formatTime(time)`. — Dhaval Marthak, Aug 01 '13 at 13:08

score 4 · Answer 1 · edited May 23 '17 at 11:56

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.net/g8YFa/

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

may I know how you are adding second rules for another field? I have the first field text and the second field I have a mobile and third field I have email — user9437856, Mar 29 '20 at 18:44

federico-t · Accepted Answer · 2013-08-01T16:29:55.967

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 }
    }
});

score 0 · Answer 3 · answered Aug 01 '13 at 13:13

0

// 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;
    } 
}

answered Aug 01 '13 at 13:13

Jonathan Römer

629
5
23

And how can I add this logic to all input elements of type="time"? – Thijs Aug 01 '13 at 14:00
Well you could loop through them all, $('[type=time]').each(function(){formatTime($(this).val())} – Jonathan Römer Aug 01 '13 at 14:08

score 0 · Answer 4 · answered Aug 01 '13 at 13:15

0

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

answered Aug 01 '13 at 13:15

Deepak Biswal

4,280
2
20
37

jQuery Validation for all inputs of a given type

4 Answers4