Validate a range of minutes [closed]

Question

Validate a range of minutes [closed]

Navigation

#1 by (0 votes)

1

I am working on a page where I ask for the hour and minute that you want and at the same time I ask for an interval of minutes that you wish to cut.

For saying 04:50 and of those 50 min I wish to cut only 5 min what I want How to validate so that when the user chooses a range of 20 minutes, it does not let him advance and mark error because he can not cut more minutes than he has left? Any suggestions on how to do it?

This is my code:

Minutos a cortar
<input type="number" min="00" max="59" oninput="maxLengthCheck(this)" placeholder="00" onkeypress="return isNumeric(event)" id="mine" name="mine[]">

Minutos      
<select data-style="btn-primary" class="selectpicker show-tick" data-size="5" data-width="auto" multiple data-max-options="1"  data-actions-box="true" name="min[]" id="min">
    <option value="00">00</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option> 
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>   
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>                                                                   
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>   
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>                                                                   
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>   
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>                                                                   
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
    <option value="49">49</option>
    <option value="50">50</option>   
    <option value="51">51</option>
    <option value="52">52</option>
    <option value="53">53</option>                                                                   
    <option value="54">54</option>
    <option value="55">55</option>
    <option value="56">56</option>
    <option value="57">57</option>
    <option value="58">58</option>
    <option value="59">59</option>	
</select>

javascript html

asked by Houdini 25.10.2016 в 20:24

source

1 answer

IValueConverter refresh How to open more than 2 databases simultaneously in access protected with password in Crystal Report

score 0 · Answer 1

You could implement dynamically with Jquery that each time you select the minutes do not show to select larger options, for this you would use

change to detect the change in input
find to select the options to remove.
append to add options depending on the value of input

$(document).on('change focus', '#mine', function(event) {
  $('#min').find('option').remove();
    var val = $(this).val();
    for (var i = 1; i <= val; i++) {
       $('#min').append($('<option>', {
          value: i,
          text: i
      }));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
Minutos Deseados
  <input type="number" min="00" max="59" o placeholder="00" id="mine" name="mine[]">

Minutos      
  <select data-style="btn-primary" class="selectpicker show-tick" data-size="7" data-width="auto" multiple     id="min">
  
   </select>