Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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/

over 4 years ago · Santiago Trujillo Report

0

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');
 });
over 4 years ago · Santiago Trujillo Report

0

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>

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!