Javascript 输入类型=编号的Jquery更改函数错误检查表单

我正在实现一个计时器，并试图找出如何在表单中的输入框中检查非数字的随机字符串或字符。输入字符或字符串似乎不会触发change函数，我猜这是因为我的html中有type=number。我很犹豫是否将其更改为type=text，因为我喜欢type=number输入框附带的微调器上下箭头

是否有一种简单的方法可以同时检查所有四个输入框，而不是对所有四个框都使用else语句？我想一定有一个优雅的方式来做到这一点。我刚刚开始使用JavaScript，所以如果您有任何帮助，我将不胜感激。谢谢:

js:

html:

---

使它们成为只读或非焦点我使用了焦点输出而不是更改，这似乎很有效。谢谢

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

<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>