2

Tengo la siguiente función que permite solo números enteros con máximo de dos decimales:

function validateFloatKeyPress(el, evt) {

  var charCode = (evt.which) ? evt.which : event.keyCode;
  var number = el.value.split(',');
  if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  //just one dot
  if (number.length > 1 && charCode == 44) {
    return false;
  }
  //get the carat position
  var caratPos = getSelectionStart(el);
  var dotPos = el.value.indexOf(",");
  if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
    return false;
  }
  return true;
}

function getSelectionStart(o) {
  if (o.createTextRange) {
    var r = document.selection.createRange().duplicate()
    r.moveEnd('character', o.value.length)
    if (r.text == '') return o.value.length
    return o.value.lastIndexOf(r.text)
  } else { return o.selectionStart }
}
<input type="text" class="form-control_normal" id="precio" onkeypress="return validateFloatKeyPress(this,event);"  >

Me gustaría que esta función me pudiera permitir valores negativos. ¿Qué debería agregar?

1
  • El código que pones no tiene nada de jQuery. Parece que estás usando JavaScript puro. Inicialmente quité la etiqueta de jQuery pero luego la volví a poner por si quieres una solución así
    – Alvaro Montoro
    Commented el 7 feb. 2017 a las 0:13

2 respuestas 2

3

Tienes que hacer 3 cambios sencillos en el código:

  1. Permitir el carácter - (código 45)
  2. Sólo permitir el - al principio del número
  3. No permitir más de un -

Aquí te dejo los cambios comentados:

function validateFloatKeyPress(el, evt) {

  var charCode = (evt.which) ? evt.which : event.keyCode;
  var number = el.value.split(',');
  // permitir el signo de - (45)
  if (charCode != 45 && charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  //just one dot
  if (number.length > 1 && charCode == 44) {
    return false;
  }
  //get the carat position
  var caratPos = getSelectionStart(el);
  // no permitir que se ponega el - en una posicion diferente de la inicial
  if (caratPos > 0 && charCode == 45) {
    return false;
  }
  // no permtir mas de un - en el numero
  if (charCode == 45 && el.value.charAt(0) == "-") {
    return false;
  }
  var dotPos = el.value.indexOf(",");
  if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
    return false;
  }
  return true;
}

function getSelectionStart(o) {
  if (o.createTextRange) {
    var r = document.selection.createRange().duplicate()
    r.moveEnd('character', o.value.length)
    if (r.text == '') return o.value.length
    return o.value.lastIndexOf(r.text)
  } else { return o.selectionStart }
}
<input type="text" class="form-control_normal" id="precio" onkeypress="return validateFloatKeyPress(this,event);"  >

1

Otra opción sería mostrar si el valor ingresado es correcto usando CSS. Además te ahorras mucho código.

Ejemplo

let input = document.getElementById('val');
let valMsg = document.querySelector('input + .val-msg');

input.addEventListener('input', function (e) {
	if(!input.checkValidity()) {
  	valMsg.style.display = 'block';
  } else {
  	valMsg.style.display = 'none';
  }
});
input {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: .5rem .75rem;
}
input:focus {
  border-color: #3498db;
  outline: none;
}
input:valid {
  border-color: #2ecc71;
}
input:invalid {
  border-color: #e74c3c;
}
.val-msg:after {
  color: red;
  content: attr(validation);
  display: block;
  font-family: 'Segoe UI', 'Ubuntu', system;
  font-size: 14px;
  margin-top: 5px;
}
<form>
  <input 
    type="text" 
    id="val" 
    pattern="^-?\d+(\.[0-9]{1,2})?$" 
    required="required"
    title="Solo números con máximo 2 decimales"
   />
   <span class="val-msg" validation="Solo números con máximo 2 decimales"></span>
</form>

Nota: En el caso de IE, solo 10 o posterior.

2
  • aunque en las etiquetas no nombra css, buena respuesta Commented el 7 feb. 2017 a las 0:50
  • 1
    Pero pone la etiqueta html5, por lo que por ahí voy (HTML5 validation) jeje
    – gugadev
    Commented el 7 feb. 2017 a las 0:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.