我在表单中有两个字段 timervalue 和 warmupvalue (timervalue 总是以 Minutes 为单位。)

如何对时间选择器进行验证，使其永远不会超过给定的分钟数？

这是我的代码

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

这是我的 fiddle

请告诉我怎么做

最佳答案

我的假设是有两个地方需要预热时间限制:

1) 每当他们改变总时间时。在下面的代码中，我会在必要时减少预热时间，使其永远不会超过总时间。

2) 每当他们更改预热时间时。在我看来，这应该限制为输入的总时间的最大值。

每当这些值发生变化时，我都会调用一个通用函数来完成此操作。

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

这是更新后的 Fiddle http://jsfiddle.net/k28jh65a/9/

关于javascript - 如何对 Bootstrap 时间选择器进行验证，使其永远不会超过给定的分钟数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43116926/