javascript - Jquery change function error checking form for input type=number -
i'm implementing timer, , trying figure out how error check input boxes in form random strings or characters aren't numbers. putting in character or string doesn't seem trigger change() function, , i'm guessing it's because have type="number"
in html. i'm hesitant change type = "text"
because spinner , down arrows come type="number"
input boxes.
is there easy way check 4 input boxes @ once instead of having "else" statement 4 boxes? i'm thinking there has elegant way this. i'm starting out javascript, appreciated. :)
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 " + secs); if($("#sec").val() >= 60){ var newsecs = secs % 60; var newmins = mins + math.floor(secs/60);//can > 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 valid time interval"); $(this).val(""); return; } }); }); //minutes changed $(function(){ $("#min").change(function(){ mins = parseint( $("#min").val() || -1); hours = parseint( $("#hour").val() || -1); days = parseint( $("#day").val() || -1); console.log("mins " + mins); if($("#min").val() >= 60){ var newmins = mins % 60//can > 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 valid time interval"); $(this).val(""); return; } }); }); //hours changed $(function(){ $("#hour").change(function(){ hours = parseint( $("#hour").val() || -1); days = parseint( $("#day").val() || -1); console.log("hours " + 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 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>
Comments
Post a Comment