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

There is a built in way of doing this. Add the following to the validator property:

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

Applying it to your code:

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

Answer 2

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/

Answer 3

Maybe somthing like:

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

Answer 4

I'm new in this but I suppose I would use $.when():

$.when('condition').then('function');