validacion - validar formulario javascript html5

Cómo evitar la inserción de valor que es mayor que el campo de número máximo en html

Question

Estoy usando el campo numérico en html5,

aquí está mi código,

<input type="number" class="edit-items" />

configuro el máximo de este campo numérico usando javascript.

element.max = quantity;
element.min = 0;
element.step = 1;

Si estoy usando la flecha hacia arriba en el campo numérico. Mayor valor que el máximo no es posible. Pero cuando traté de insertar en el campo, es posible un mayor valor que el máximo.

Me gustaría prevenirlo. ¿Cómo?

Answer 1

Agregue un listner de eventos en la entrada (oninput): verifíquelo aquí: en la muestra de cambio

function maxValue(){
    var numbers = document.getElementById("numbers");
    console.log(numbers);
    var maxQuantity = 5;

    numbers.addEventListener("input", function(e) {
        if(this.value>maxQuantity) {
            alert("max value reached ! ");
            this.value = maxQuantity;
        }
    })
};
window.onload = maxValue();

Answer 2

Como dijiste, la entrada del tipo de number funcionará bien con flechas y no con cambio manual, por lo que intenta utilizar el evento oninput para ayudarte a controlar las entradas de los usuarios:

    document.getElementsByClassName(''edit-items'')[0].oninput = function () {
        var max = parseInt(this.max);

        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }

<input type="number" class="edit-items" max=''10''/>

Espero que esto ayude.