Prevent min > max values on input type=number

Question

I have two input numbers (min and max). Is there a way to prevent user inserting values like min > max?

<input type="number" class="inputMin" placeholder="Min.">

<input type="number" class="inputMax" placeholder="Max.">

@Burki that was totally unnecessary. If i am not sharing any code that means I did not find anything otherwise I wouldn't have been asking here. — brunodd
– brunodd, Commented Jun 12, 2015 at 13:46
Was it? Well. You might want to take a look at the help session. The way you asked your question would have been a reason to close it. I was trying a less aggressive way to point that out, but well, in the end it's up to you. — Burki
– Burki, Commented Jun 12, 2015 at 13:51

Andrew Mairose · Accepted Answer · 2015-06-12 13:56:00Z

1

There are many different ways you can do this.

One option is whenever min is changed, if it is greater than max, change it to equal max, like this:

$('.inputMin').on('change', function() {
    var max = parseFloat($('.inputMax').val());                                     
    var min = parseFloat($('.inputMin').val());
    if (min > max) {
        $('.inputMin').val(max);
    }
});

or the opposite case when you change max:

$('.inputMax').on('change', function() {
    var max = parseFloat($('.inputMax').val());                                     
    var min = parseFloat($('.inputMin').val());
    if (min > max) {
        $('.inputMin').val(max);
    }
});

Another option is to display an error, either when the form is submitted, or dynamically as the user changes the input.

There are a number of javascript libraries that allow you to do dynamic validation very easily. Check out Angular.js, and how to use it for form validation.

edited Jun 12, 2015 at 13:56

answered Jun 12, 2015 at 13:46

Andrew Mairose

11.1k15 gold badges62 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brunodd Over a year ago

Thanks mate. I tried that but doesn't seems to work: jsfiddle.net/brunodd/78vxko4u

Andrew Mairose Over a year ago

Forgot to include parseFloat. Just updated the answer.

Seblor · Accepted Answer · 2015-06-12 14:02:23Z

1

Without JQuery, you can try this :

(and you have to change class to id)

var min = document.getElementById("inputMin");
var max = document.getElementById("inputMax");

function check() {
    if (min.value > max.value) {
        min.value = max.value;
    }
};

min.addEventListener("input", check, false);
max.addEventListener("input", check, false);

You can try it there

answered Jun 12, 2015 at 14:02

Seblor

7,1771 gold badge30 silver badges48 bronze badges

Comments

Cagatay Ulubay · Accepted Answer · 2015-06-12 13:42:39Z

-1

You can use the parameters min and max like:

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Ref: http://www.w3schools.com/html/html_form_input_types.asp (Input Type: number)

Also you can use Javascript to check if the value is >= min_number and <= max_number, but both are client side scripts, which can be bypassen with editing the html part.

You also need a server-side check so you can be sure it's within the range.

answered Jun 12, 2015 at 13:42

Cagatay Ulubay

2,5591 gold badge17 silver badges26 bronze badges

Collectives™ on Stack Overflow

Prevent min > max values on input type=number

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related