A la hora de programar un proyecto, siempre se requieren ciertas validaciones para agilizar el proceso que realiza el usuario a esto surge el siguiente problema: Se necesita que cuando se oprima una tecla se realice alguna determinada función; es decir, si oprimo la tecla "A" quiero que se guarde los datos de un formulario, o si orpimo la tecla "C" quiero que se cancele la acción del submit; A esto realice un pequeño código de validación que les puede ser de mucha ayuda.
Código Ejemplo:
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<!-- Formulario con los inputs -->
<form id="form1" name="form1" method="post">
<label for="TxtEstado">Estado:</label>
<input type="text" name="TxtEstado" id="TxtEstado" onKeyUp="DecidirEstado();"><!-- En el evento onKeyUp llamo la función que me permite mostrar el botón adecuado -->
<input type="button" name="BtoAceptar" id="BtoAceptar" value="Aceptar">
<input type="button" name="BtoConsultar" id="BtoConsultar" value="Consultar">
</form>
<script>
// Oculto los botones al cargar la página
document.getElementById('BtoAceptar').style.display = 'none';
document.getElementById('BtoConsultar').style.display = 'none';
// Funcion para decidir el botón a mostrar
function DecidirEstado(){
// Capturo el valor de la caja de texto
var Estado = document.getElementById('TxtEstado').value;
// Evaluo el valor digitado para mostrar el botón adecuado, adicionalmente convierto la cadena en mayúscula para no tener inconvenientes a la hora de evaluar la cadena
if(Estado.toUpperCase() == 'A'){
document.getElementById('BtoAceptar').style.display = 'inline';
}
else if(Estado.toUpperCase() == 'C'){
document.getElementById('BtoConsultar').style.display = 'inline';
}
// Si digito algo diferente a lo permitido, no muestro ningún botón
else{
document.getElementById('BtoAceptar').style.display = 'none';
document.getElementById('BtoConsultar').style.display = 'none';
}
}
</script>
</body>
</html>
Resultado:
See the Pen Activar botón dependiendo del valor de un txt con javascript by Leidy Vanessa Briceo Caceres (@vanessgloom) on CodePen.
Hola, como puedo validar una fecha en formato yyyymmdd, que no lleve ni "/" ni "-" ni "espacios", osea que sean juntos los números, si es correcto el formato, me deje hacer el submit en un botón de "Aceptar", si es incorrecto el formato, me mande algún mensaje de error, se que es con la propiedad date, para saber también si es una fecha correcta, pero he intentado de muchas maneras y no puedo, este es el patrón que tengo /^\d{4}-\d{2}-\d{2}$/ para ese formato.(Para que solo acepte números, puedo usar otra función no? osea una función que valida que sean solo números, si son letras no deje escribirlas y otra que valide el formato, se puede eso?, no se truncaría con alguna función? Por favor agradecería mucho tu ayuda.
ResponderEliminarhola buena tarde,respecto a tu pregunta tengo lo que buscas.
EliminarEl código esta super comentado para que tengas una mejor guía.
CODIGO:
<label for="TxtFecha">Fecha: </label>
<!-- En el evento onKeyPress llamamos la función SoloNumeros() y en el onKeyUp la función ValidarFecha() -->
<input name="TxtFecha" type="text" id="TxtFecha" placeholder="YYYYMMDD" maxlength="8" onKeyPress="return SoloNumeros(event);" onKeyUp="ValidarFecha();">
<divn id="Mensaje"></div>
CÓDIGO SCRIPT:
// Función para permitir sólo números, retroceso y enter
function SoloNumeros(evt){
if(window.event){ //asignamos el valor de la tecla a keynum
keynum = evt.keyCode; //IE
}
else{
keynum = evt.which; //FF
}
//comprobamos si se encuentra en el rango numérico
if((keynum > 47 && keynum < 58) || keynum == 8 || keynum == 13){
return true;
}
else{
return false;
}
}
// Función para verificar que la fecha escrita sea correcta según el formato YYYYMMDD
function ValidarFecha(){
// Almacenamos el valor digitado en TxtFecha
var Fecha = document.getElementById('TxtFecha').value;
var Mensaje = '';
// Si la fecha está completa comenzamos la validación
if(Fecha.length == 8){
var Anio = Fecha.substr(0, 4); // Extraemos en año
var Mes = parseFloat(Fecha.substr(4, 2)) - 1; // Extraemos el mes
var Dia = Fecha.substr(6, 2); // Extraemos el día
// Con la función Date() de javascript evaluamos si la fecha existe
var VFecha = new Date(Anio, Mes, Dia);
// Si las partes de la fecha concuerdan con las que digitamos, es correcta
if((VFecha.getFullYear() == Anio) && (VFecha.getMonth() == Mes) && (VFecha.getDate() == Dia)){
Mensaje = 'Fecha correcta';
}
else{
Mensaje = 'Fecha incorrecta';
}
}
// Mostramos el mesaje
document.getElementById('Mensaje').innerHTML = Mensaje;
}
https://programadoressinoficio.blogspot.com.co/2016/11/validar-fecha-en-un-input-con-javascript.html
ResponderEliminar