Jquery change function error checking form for input type=number

I'm implementing a timer, and trying to figure out how to error check my input boxes in my form for any random strings or characters that aren't numbers. Putting in a character or string doesn't seem to trigger the change() function, and I'm guessing it's because I have type="number" in my html. I'm hesitant to change it to type = "text" because I like the spinner up and down arrows that come with the type="number" input boxes.

Is there an easy way to check all four input boxes at once instead of having an "else" statement for all four boxes? I'm thinking there has to be an elegant way to do this. I'm just starting out with JavaScript, so any help would be appreciated. Thanks :)

js:

$(function(){
    $("#sec").change(function(){
        secs = parseInt( $("#sec").val() || -1);
        mins = parseInt( $("#min").val() || -1);
        hours = parseInt( $("#hour").val() || -1);
        days = parseInt( $("#day").val() || -1);

        console.log("secs is " + secs);
        if($("#sec").val() >= 60){
            var newSecs = secs % 60;
            var newMins =  mins + Math.floor(secs/60);//can be > 60
            var newHours = hours + Math.floor(mins/60);
            var newDays = days + Math.floor(hours/24);

            $("#sec").val(newSecs);
            $("#min").val(newMins);
            $("#hour").val(newHours);
            $("#day").val(newDays);
        }

        else if(secs < 0 || !(typeof $("#sec").val() === 'number' && (secs % 1) === 0)){
            alert("Please enter a valid time interval");
            $(this).val("");
            return;
        }
    });
});

//minutes was changed
$(function(){
    $("#min").change(function(){
        mins = parseInt( $("#min").val() || -1);
        hours = parseInt( $("#hour").val() || -1);
        days = parseInt( $("#day").val() || -1);


        console.log("mins is " + mins);
        if($("#min").val() >= 60){
            var newMins = mins % 60//can be > 60
            var newHours = hours + Math.floor(mins/60);
            var newDays = days + Math.floor(hours/24);

            $("#min").val(newMins);
            $("#hour").val(newHours);
            $("#day").val(newDays);
        }

        else if(mins < 0 || !(typeof $("#min").val() === 'number' && (mins % 1) === 0)){
            alert("Please enter a valid time interval");
            $(this).val("");
            return;
        }
    });
});

//hours was changed
$(function(){
    $("#hour").change(function(){
        hours = parseInt( $("#hour").val() || -1);
        days = parseInt( $("#day").val() || -1);

        console.log("hours is " + hours);
        if($("#hour").val() >= 24){
            var newHours = hours % 24;
            var newDays = days + Math.floor(hours/24);

            $("#hour").val(newHours);
            $("#day").val(newDays);
        }

        else if(hours < 0 || !(typeof $("#hour").val() === 'number' && (hours % 1) === 0)){
            alert("Please enter a valid time interval");
            $(this).val("");
            return;
        }
    });
});

html:

<form class="form-inline" id="input">

        <div class="form-group col-xs-2">
            <input id="day" class="form-control input-sm input" type="number" value="" placeholder="Days">
        </div>
        <div class="form-group col-xs-2">
            <input id="hour" class="form-control input-sm input" type="number" value=""  placeholder="Hours">
        </div>
        <div class="form-group col-xs-2">
            <input id="min" class="form-control input-sm input" type="number" value=""  placeholder="Minutes">
        </div>
        <div class="form-group col-xs-2">
            <input id="sec" class="form-control input-sm input" type="number" value="" placeholder="Seconds">
        </div>
    </form>