1

Validar un día puede ser algo sencillo cuando se trata únicamente de validar números pero puede tener mucha complicación si queremos validar posteriormente una fecha válida. Por ejemplo, 30 de Febrero no puede existir.

En este caso quisiera validar un campo input text sólo numérico con valores entre 1 y 31, ambos inclusive.

Código Javascript:

    //Validar el dia.
function validacionDia(event){
    var key = event.which || event.keyCode;
    var value = document.getElementById("iddia").value;
    var dia = value + String.fromCharCode(key);
    if (isNaN(dia) === true || dia < 1 || dia > 31) {
        return false;
    }
    return true;
}

Código HTML:

<input type="text" size="4" maxlength="2" name="dia" id="iddia"/>

¿Por qué me deja escribir números superiores a 31? Cuando escriba un 4 o un 6 o un 9 debería no dejarme escribir el segundo dígito, así mismo si escribo un 3 y los siguientes dígitos son cualquiera menos el 0-1.

Código asociado al evento:

window.addEventListener("load", function() {
miformulario.dia.addEventListener("change", function(){ 
        return validacionDia(event);
    }, false);
});
9
  • ¿Puedo solucionar tu problema desde un punto de vista diferente o debo usar tu pseudocódigo obligatoriamente? Commented el 15 may. 2017 a las 13:30
  • puedes usar patrones en javascript stackoverflow.com/questions/8937408/… Commented el 15 may. 2017 a las 13:34
  • 1
    Las expresiones regulares no solucionan su problema @JackNavaRow Commented el 15 may. 2017 a las 13:37
  • Todas las opciones que se entiendan o comprendan son validas. En programación nunca existe una única solución.
    – omaza1990
    Commented el 15 may. 2017 a las 13:37
  • @JackNavaRow Mi problema no es de patrones, sino de un único campo, cual ya tengo validado para que sólo acepte números pero ahora el problema viene a la hora de evaluar las diferentes opciones que puse en el pseudocódigo.
    – omaza1990
    Commented el 15 may. 2017 a las 13:38

3 respuestas 3

1

Tras debatir en el chat acerca de la funcionalidad deseada, éste es el resultado:

function validacionDia(event) {
  var key = event.which || event.keyCode;
  /* Observamos el resultado que generará la tecla */
  var día = parseInt(
    miformulario.dia.value +
    String.fromCharCode(key)
  );
  /* Si no está dentro de lo esperado cancelamos la pulsación */
  if (
    isNaN(día) === true ||
    día < 1 ||
    día > 31
  ) {
    return false;
  }
  return true;
}
<form name="miformulario">
  <input type="text"
    name="dia" id="iddia"
    onkeypress="return validacionDia(event)" />
</form>


Respuesta original

He usado una funcionalidad que te provee el objeto Date en el que si indicas un día 0 te selecciona el último día del mes anterior y, además, te permitiría tener días de más del soportado por el mes incrementando internamente el número de mes y/o año.

function comprobar(obj, tecla) {
  switch(obj.name) {
    case 'año':
      var año = parseInt(obj.value);
      if (isNaN(año)) {
        obj.value = 2017;
      } else if (año < 1970) {
        obj.value = 1970;
      } else if (año > 2018) {
        obj.value = 2018;
      }
      return comprobar(document.f.mes);
      break;
    case 'mes':
      var mes = parseInt(obj.value);
      if (isNaN(mes)) {
        obj.value = 5;
      } else if (mes < 1) {
        obj.value = 1;
      } else if (mes > 12) {
        obj.value = 12;
      }
      return comprobar(document.f.día);
      break;
    case 'día':
      if (obj.value === '' && tecla === true) {
        return true;
      }
      var día = parseInt(obj.value);
      var último = new Date(
        parseInt(document.f.año.value),
        parseInt(document.f.mes.value),
        0
      ).getDate();
      if (isNaN(día)) {
        if (tecla === true) {
          return false;
        } else {
          obj.value = 8;
        }
      } else if (día < 1) {
        if (tecla === true) {
          return false;
        } else {
          obj.value = 1;
        }
      } else if (día > último) {
        if (tecla === true) {
          return false;
        } else {
          obj.value = último;
        }
      }
      break;
  }
  return true;
}

function enviar() {
  alert('Fecha: ' +
    document.f.año.value + '-' +
    document.f.mes.value + '-' +
    document.f.día.value
  );
  return false;
}
<form name="f" onsubmit="return enviar()">
  <input type="number" name="año"
    min="1970" max="2018" value="2017"
    onblur="comprobar(this)"
    onchange="comprobar(this)"
  />
  <input type="number" name="mes"
    min="1" max="12" value="5"
    onblur="comprobar(this)"
    onchange="comprobar(this)"
  />
  <input type="number" name="día"
    min="1" max="31" value="8"
    onblur="comprobar(this)"
    onkeyup="return comprobar(this, true)"
    onchange="comprobar(this)"
  />
  <input type="submit" value="Mostrar fecha" />
</form>

Teóricamente habría que restar uno al mes en curso, pero como Date cuenta enero como 0 y diciembre como 11 no es necesario hacerlo.

Hay que tener cuidado al usar el evento onkeyup porque no permite escribir un número desde una cadena vacía a menos que desarrollemos esa excepción.

Como nueva edición he desarrollado esa excepción, evitando la pulsación de una tecla que provoque que el valor sea NaN (letras, por ejemplo), o se salga de los límites, pero no repone el valor máximo, mínimo o por defecto hasta que salgamos del campo.

Por último, prácticamente todos los navegadores compatibles con HTML5 soportan el campo <input> de tipo date.

En ese enlace se muestran todos los problemas que te puedas encontrar con el uso de dicha etiqueta (como mostrar fechas localizadas) e incluso usos para solicitar rangos de fechas admitidos:

<input type="date" min="2010-01-01" max="2018-12-31" />

Pero si usas jQuery te recomiendo usar su widget datepicker que soluciona compatibilidad con navegadores y localización a través de su propiedad dateFormat:

$( "#fecha" ).datepicker({
  regional: 'es',
  dateFormat: "dd/mm/yyyy"
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"><script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script src="https://cdn.rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-es.js"></script>
<div id="fecha"></div>

PD: He agregado el atributo regional para que los textos aparecieran en castellano.

4
  • Aunque creo que el OP no lo menciona, ¿tu código valida años bisiestos? Commented el 15 may. 2017 a las 14:32
  • 1
    La duda ofende :P :) Es tan fiable como sea la implementación del objeto Date. Commented el 15 may. 2017 a las 14:38
  • Te sugiero des soluciones exactas al problema y luego si lo consideras puedes sugerir soluciones mejores al problema, Saludos!! ;))..
    – fwBasic
    Commented el 15 may. 2017 a las 15:35
  • @fwBasic, he dado solución exacta a la primera parte de su pregunta y solicité permiso para implementar la segunda sin seguir su pseudocódigo. Fue aceptada y así lo hice. Gracias por comentar. Commented el 15 may. 2017 a las 15:52
1

La siguiente rutina valida que coloquen un numero entre 1 y 31, utilizando el evento onKeyPress en cualquiera de sus variantes:

html Tag:

<input onKeyPress="..">

o javascript Event:

document.geElementById("IdName").addEventListener("keypress",
 [ funtionName | function () {..}])

Ejemplo:

document.getElementById("iddia_addEventListener")
 .addEventListener("keypress", validacionDia);

function validacionDia(event){
 var key = event.which || event.keyCode,
  value = event.target.value,
  n = value+String.fromCharCode(key);
 if ( isNaN(n) || n<1 || n>31)
  event.preventDefault();
}
Validar dia (de 1 a 31)<br>
<br>
Usando onKeyPress=".."<br>
<input type="text" size="4" maxlength="2" name="dia" id="iddia" onKeyPress="validacionDia(event);"/>
<br><br>
Usando addEventListener("keypress", [ funtionName | function () {..}])<br>
<input type="text" size="4" maxlength="2" name="iddia_addEventListener" id="iddia_addEventListener" />

te sugiero uses html5 que incluye un campo tipo fecha, es muy sencillo usarlo, aquí te dejo un ejemplo de como hacerlo:

<input type="date">

Espero esto te ayude... Saludos!! ;))...

6
  • 1
    Si lo que quieres es solo validar el día aquí te dejo una rutina que lo hace pero si lo que quieres es validar una fecha campo por campo te sugiero utilices la rutina que @Oscar te ha dejado, sin embargo te sugiero menejes las fechas en un solo campo, en Internet encontraras rutinas de como validarlas, e incluso ya html5 incluye un campo de fecha muy bueno Saludos!! ;))...
    – fwBasic
    Commented el 15 may. 2017 a las 15:37
  • Funciona perfectamente sólo que tuve que poner n>0 porque sino cogía el valor 0 como día.
    – omaza1990
    Commented el 15 may. 2017 a las 16:44
  • 1
    Que bueno, me alegra te haya funcionado y recuerda calificar la respuesta que mas se adecue a tus requerimientos, Saludos!! ;))...
    – fwBasic
    Commented el 15 may. 2017 a las 16:47
  • +1 html5 al incorporar el campo de tipo fecha elimina grandes problemas de validar "hardcode" la información suministrada. Commented el 15 may. 2017 a las 18:24
  • @fwBasic Tengo una duda a la hora de implementarlo con el addEventListener, no me funciona con este evento.
    – omaza1990
    Commented el 16 may. 2017 a las 17:58
0

Yo lo que haría es que nada mas poner el número, si este es mayor de 31, se cambie el número a 31, lo veo más intuitivo que el resto de soluciones, nada mas verlo en funcionamiento te das cuenta de que es el máximo del número.

Y de la misma manera para valores menores a 1, ya que al tratarse de un día es imposible

var box = document.querySelector("#input");

box.addEventListener("keyup", function(){
    if(Number(box.value) > 31){
      box.value = 31;
    }
    else if(Number(box.value) < 1){
      box.value = 1;
    }
});
<input id="input" type="text">

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.