Question 421662 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – how to prevent input value lower than another

I have 2 <input type="number">: min and max.

It should not be possible to put a value inside max input lower than the value in min input.

In example below you can select the value in max input and type for example 9. This should not be possible.
How can I prevent that?

$(".min-input, .max-input").on("input", function(e) {
    var minInput = $(".min-input").val();
    var maxInput = $(".max-input").val();
    if(maxInput < minInput) {
        $(".max-input").val(minInput);      
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<span class="input-group-text pretext">Min:</span>          
<input min="" max="" type="number" class="form-control min-input" name="price_min" value="12">
<br />                              
<span class="input-group-text pretext">Max:</span>
<input min="" max="" type="number" class="form-control max-input" name="price_max" value="25">

Fiddle

Tags:

2

Answers


  1. 0

    The value of a textbox is a string you have to convert to an number to compare the min/max values, otherwise you’re doing string comparisons and the ‘1’ from the ’12’ is < ‘9’.

    Login or Signup to reply.
  2. 0

    The example below uses plain JavaScript and <input type="range"> so the user can’t type anything out of range. If the value of #min exceeds the value of #max #min value will be clamped to #max value. If the value of #max is less than #min then #max value is clamped to the value of #min.

    Details are commented in the example.

    // Reference <form>
const ui = document.forms.ui;
// Reference all form controls
const io = ui.elements;
// Set value of <output>s to the ranges values
Array.from(io.info).forEach(o => {
  o.value = o.nextElementSibling.value;
});

/**
 * This "input" event handler clamps the ranges
 * values so #min is always the minimum and #max is
 * always the maximum between the two of them.
 * @param {object} e - Event object
 */
const minMax = (e) => {
  // Declared for latter
  let adj;
  // e.target is the element the user is interacting with
  const tgt = e.target;
  // The active range's <output> value matches
  tgt.previousElementSibling.value = tgt.value;

  // If the active range is #min...
  if (tgt.matches("#min")) {
    /**
     * If the active range's value is greater than 
     * #max value then clamp active range's value to 
     * #max value. Otherwise assign #min value.
     * Have the applicable <output> display the value.
     */
    adj = tgt.valueAsNumber > io.max.valueAsNumber ? io.max.valueAsNumber : tgt.valueAsNumber;
    tgt.value = adj;
    tgt.previousElementSibling.value = tgt.value;
  }
  // If the active range is #max...
  if (tgt.matches("#max")) {
    /**
     * If the active range's value is less than 
     * #min value then clamp active range's value to 
     * #min value. Otherwise assign #max value.
     * Have the applicable <output> display the value.
     */
    adj = tgt.valueAsNumber < io.min.valueAsNumber ? io.min.valueAsNumber : tgt.valueAsNumber;
    tgt.value = adj;
    tgt.previousElementSibling.value = tgt.value;
  }
}

// Register <form> to listen for the "input" event.
ui.oninput = minMax;
    main {
  min-height: 100dvh
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<main class="container bg-dark">
  <section class="row">
    <form id="ui">
      <fieldset class="input-group mt-4">
        <label for="min" class="form-label text-white">Min:&nbsp;</label>
        <output for="min" name="info" class="text-info"></output>
        <input id="min" name="min" class="form-range" type="range" min="12" max="25"value="12">
        <br><br>
        <label for="max" class="form-label text-white">Max:&nbsp;</label>
        <output for="max" name="info" class="text-info"></output>
        <input id="max" name="max" class="form-range" type="range" min="12" max="25" value="25">
      </fieldset>
    </form>
  </section>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search