Mis suposiciones son que hay dos lugares que requieren la restricción de tiempo de calentamiento:

1) Siempre que cambien el tiempo total. En el siguiente código, reduzco el tiempo de calentamiento, cuando es necesario, de modo que nunca exceda el tiempo total.

2) Siempre que cambien el tiempo de calentamiento. Me parece que esto debería limitarse a un máximo del tiempo total ingresado.

Lo he hecho llamando a una función común cada vez que estos valores cambian.

 $(document).ready(function() { // cache jQuery elements var $timerVal = $("#timervalue"); var $warmUpVal = $('#warmupvalue'); function checkAndAdjustWarmUp() { // timerVal expected in minutes var timerVal = parseInt($timerVal.val()); timerVal = isNaN(timerVal) ? 0 : timerVal; // could be blank, so assume blank = 0 mins. if (!isNaN(timerVal)) { // make sure they entered a number that was also an integer $timerVal.val(timerVal); // clear any non-numeric characters they may have typed var timerHrs = Math.floor(timerVal / 60); var timerMins = timerVal % 60; var timerSecs = 0; var warmUpVals = $warmUpVal.val().split(':'); var warmUpHrs = parseInt(warmUpVals[0]); var warmUpMins = parseInt(warmUpVals[1]); var warmUpSecs = parseInt(warmUpVals[2]); var warmUpTotal = (warmUpHrs * 60 * 60) + (warmUpMins * 60) + warmUpSecs; // if warm up is greater than total time (in seconds) then reduce it if (warmUpTotal > (timerVal * 60)) { adjustingTime = true; // to prevent recursion warmUpTotal = (timerVal * 60); // now we repopulate the control with the warmUpTotal warmUpHrs = Math.floor(warmUpTotal / 60 / 60); warmUpMins = Math.floor((warmUpTotal - (warmUpHrs * 60 * 60)) / 60); warmUpSecs = warmUpTotal % 60; // update timepicker $warmUpVal.timepicker('setTime', padTime(warmUpHrs) + ':' + padTime(warmUpMins) + ':' + padTime(warmUpSecs)); } } } $('#warmupvalue').timepicker({ showMeridian: false, showSeconds: true, //showMeridian: false, defaultTime: '0:00:00' }); // adjust time when timer value changed $timerVal.on("change", function() { // triggers only when leaving the timer field (ie. blur). checkAndAdjustWarmUp(); }); // restrict warm up time range when changing warm up times $('#warmupvalue').timepicker().on('changeTime.timepicker', function(e) { // check and adjust when changing checkAndAdjustWarmUp(); }); function padTime(n) { // add a leading 0 if less than 10 return (n < 10) ? ("0" + n) : n; } $('#update-form').bootstrapValidator({ fields: { timervalue: { validators: { notEmpty: { message: 'timervalue is required' } } } } }) });

Aquí está el Fiddle actualizado http://jsfiddle.net/k28jh65a/9/

Tal vez algo como:

 $('#warmupvalue').timepicker( { showMeridian: false, showSeconds: true, defaultTime: '0:00:00' }).on('changeTime.timepicker', function(e) { var _hours = e.time.hours; var _minutes = e.time.minutes; var _meridian = e.time.meridian; //convert hours into minutes _minutes += _hours * 60; if(_minutes > 130) $('#warmupvalue').timepicker('setTime', '0:00:00'); });

Hay una forma integrada de hacer esto. Agregue lo siguiente a la propiedad del validator :

 between: { min: 0, max: 100, message: 'The percentage must be between 0 and 100' }

Aplicándolo a tu código:

 $(document).ready(function() { $('#warmupvalue').timepicker({ showMeridian: false, showSeconds: true, //showMeridian: false, defaultTime: '0:00:00' }); $('#update-form').bootstrapValidator({ fields: { timervalue: { validators: { notEmpty: { message: 'timervalue is required' }, between: { min: 1, max: 100, message: 'Number of minutes must be between 1 and 100.' } } } } }) });

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); #update-form { margin: 10% 10%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css" /> <form id="update-form" class="form-horizontal"> <div class="form-group"> <input type="text" id="timervalue" name="timervalue" autocomplete="off" maxlength="3" placeholder="Timer Value Minutes" class="form-control numbersonly"> </div> <div class="form-group"> <label>Warm up</label> <div class="input-group"> <input type="text" id="warmupvalue" name="warmupvalue" class="form-control timepicker" data-minute-step="1" data-second-step="1" readonly> <span class="input-group-btn"> <button class="btn default" type="button"> <i class="fa fa-clock-o"></i> </button> </span> </div> </div> <input type="submit" class="btn btn-primary" value="Update" /> </form>