How to put a validation for bootstrap time picker so that it never exceeds given minutes?

Question

I have got two fields inside a form timervalue and warmupvalue (timervalue is always in Minutes .)

How to put a validation for timepicker so that it never exceeds given minutes ?

This is my code

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



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

This is my fiddle

Please let me know how to do this

Answer 1

My assumptions are that there are two places that require the warm up time restriction:

1) Whenever they change the total time. In the code below I reduce the warm up time, when necessary, such that it never exceeds the total time.

2) Whenever they change the warm up time. It seems to me that this should be limited to a maximum of the total time entered.

I've done this by calling a common function whenever these values change.

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

Here's the updated Fiddle http://jsfiddle.net/k28jh65a/9/