I need to enter an amount in an input only let me enter up to 8000 and if I put 8500 for example tell me that maximum amount is 8000.
<input type="text" id="breadth1" maxlength="8000" class="form-control big" placeholder="Ingrese ancho total">
I have this input but I do not know how to do it.
You have to change your input to one like this, the attribute type must be number , and with the attributes max and min you give the range you want:
input{
width: 100%;
}<input type="number" max="8000" min="0" placeholder="Ingrese un número"/> Now, if you want to validate it with jquery , you could do the following:
$(document).ready(function(){
const min = 0; // Valor mínimo
const max = 8000; // Valor máximo
// Escuchamos el evento keyup de nuestro input
$(document).on('keyup', '#num', function(){
// Obtenemos el objeto
var self = $(this);
// Obtenemos el valor actual
var value = self.val();
// Si el valor obtenido es menor a nuestro valor mínimo
// o nuestro valor valor obtenido es mayor a nuestro valor máximo
// Le decimos al usuario que no está dentro del rango
// y limpiamos nuestro campo
if(value < min || value > max){
console.log('El número ingresado no está dentro del rango permitido');
self.val('');
}
})
});input{
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="num" type="number" max="8000" min="0" placeholder="Ingrese un número"/>You could do the following:
max attribute of HTML5 for the input type number . Example:
// Usamos event-delegation
document.addEventListener('input', function(e) {
var el = e.target,
max,
val;
if(el && el.tagName.toLowerCase() === 'input' && el.type.toLowerCase() === 'number') {
val = Number(el.value);
max = el.max != '' ? Number(el.max) : Infinity;
console.log(val, max)
if (!isNaN(val) && !isNaN(max) && max < val) {
el.value = max;
}
}
});<input type="number" /> (Max infinito)<br/>
<input type="number" max="8000" /> (Max 8000)<br/>
<input type="number" max="5.5" /> (Max 5.5)<br/> Example jQuery :
// Usamos event-delegation
$(document).on('input', 'input[type="number"]', function() {
var val = Number(this.value),
max = this.max != '' ? Number(this.max) : Infinity;
console.log(val, max);
if (max < val) {
this.value = max;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" /> (Max infinito)<br/>
<input type="number" max="8000" /> (Max 8000)<br/>
<input type="number" max="5.5" /> (Max 5.5)<br/>You can use javascript to validate, in this case I used ternary operators that is just an if (?) else (:) to simplify the code a bit more.
$('#breadth1').on('input', function(){
console.log($(this).val());
($(this).val() >= 8500) ? $('p').show() : $('p').hide()
});.valida{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="breadth1" maxlength="8000" class="form-control big" placeholder="Ingrese ancho total" pattern="([0-9]|[0-9]|[0-9])">
<p class="valida">
esto es mayor
</p>