'Bootstrap Validator validate number range

How to set validation for the range for two numbers. I want to set max value of the first number to value of second number and min value of the second number to value of first numb. Here is my js code:

min_num : {
    validators : {
        integer : { 
            message : 'Please enter the valid number ',
            min : 1,
            max : 'max_num'
        },
        notEmpty : {
            message : 'Please enter the number'
        }
    }
},
max_num : {
    validators : {
        integer : {
            message : 'Please enter the valid number ',
            min : 'min_num',
            max : 10000
        },
        notEmpty : {
            message : 'Please enter the number'
        }
    }
}

And HTML:

<div class="form-group">
    <label class="col-md-2 control-label">Min num</label>
    <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"> </span> <input type="number"
                class="form-control" id="min_num" name="min_num" min="0"
                required data-bind="value:replyNumber" />
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-md-2 control-label">Max num</label>
    <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"> </span> <input type="number"
                class="form-control" id="max_num" name="max_num" min="0" required
                data-bind="value:replyNumber" />
        </div>
    </div>
</div>

Please HELP THANKS

javascriptjavajqueryvalidationbootstrap-4


Solution 1:[1]

I found solution. Just changed a little bit my HTML code and it works perfect :D

<div class="form-group">
<label class="col-md-2 control-label">Min num</label>
<div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"> </span> <input type="number"
            class="form-control" id="min_num" name="min_num" min="0"
            required data-bind="value:replyNumber" />
     </div>
   </div>
  </div>
   <div class="form-group">
  <label class="col-md-2 control-label">Max num</label>
  <div class="col-md-4 inputGroupContainer">
     <div class="input-group">
         <span class="input-group-addon"> </span> <input type="number"
            class="form-control" id="max_num" name="max_num" 
     min=min_num required
             data-bind="value:replyNumber" />
    </div>
     </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hajrudin

Related Questions