Validar textarea fecha en formulario

jarjausroy · #1 (**permalink**) 16/12/2011, 06:41

Hay alguna forma de hacer una validacion dentro de un textare que solo permita escribir dd/mm/aaaa ?? vamos que si estas escribiendo por ejemplo despues de poner dd si no pones / no permita continuar o salte una alerta avisando.

SALUDOS Y GRACIAS POR LAS MOLESTIAS

juanito1712 · #2 (**permalink**) 16/12/2011, 06:54

para eso están las expresiones regulares

la explicación aquí
http://es.wikipedia.org/wiki/Expresi%C3%B3n_regular

y ejemplos aqui
http://www.google.es/search?q=expres...cha+javascript

jarjausroy · #3 (**permalink**) 19/12/2011, 04:40

Encontrado buscando esto:

Código HTML:

<SCRIPT LANGUAGE="JavaScript"> 

  function fecha(idCampo){ 
var datePat = /^(0[1-9]|1\d|2\d|3[1-2])\/(0[1-9]|1[0-2])\/\d{4}$/;                       

                          
         
var matchArray =  
document.getElementById(idCampo).value.match(datePat); 

    if (matchArray != null) alert("fecha valida"); 
    else alert("fecha invalida formato dd/mm/aaaa");     
 } 

</SCRIPT>

realmente lo que hace es verificar por medio del boton, pero lo que yo quiero es que segun escribas en el textarea si se esta saltando alguna de las reglas del dd/mm/aaaa no continue avanzando como por ejemplo e visto codigos para solo numeros o verificacion de texto ejemplo:

Código HTML:

<script type="text/javascript">
function validar(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; // 2
    if (tecla==8) return true; // 3
    patron = /[1234567890,]/; // 4
    te = String.fromCharCode(tecla); // 5
    return patron.test(te); // 6
} 
</script>

Seria posible igual para fechas???

SALUDOS Y GRACIAS POR LAS MOLESTIAS

juanito1712 · #4 (**permalink**) 19/12/2011, 22:35

el código como tal no lo se, pero googleando se encuentra todo rápido te explico el proceso...

puedes hacer que a cada pulsacion de una tecla en el input deseafo ejecute esa función, en la que compruebas todo eso, y si cada vez que esté mal pues lo pintas de rojo, o puedes obtener el texto del input y hacer que el valor de el input sea igual al valor obtenido menos la última letra lo que generaría el efecto deseado(eso no se muy bien como se haría)
algo se substr? o algo asi?

jarjausroy · #5 (**permalink**) 22/12/2011, 02:06

googleando no encuentro con una solucion factible ala que busco =(

juanito1712 · #6 (**permalink**) 22/12/2011, 05:30

hombre, lista para un copy/paste descarado no creo, pero se encuentra

prueba con esto a ver si te gusta
<input type="text" id="acomprobar" onkeypress="fecha('acomprobar')"/>

luego ya se trata de adornar la función, en lugar de un alert pues por ejemplo

if (matchArray != null){
document.getElementById(idCampo).style.color="#000 ";
} else{
document.getElementById(idCampo).style.color="#f00 ";
}

jarjausroy · #7 (**permalink**) 22/12/2011, 07:15

no ejecuta la funcion bien :S, e puesto lo siguiente

Código HTML:

<html> 
<head> 
   <SCRIPT LANGUAGE="JavaScript"> 

  function fecha(idCampo){ 
var datePat = /^(0[1-9]|1\d|2\d|3[1-2])\/(0[1-9]|1[0-2])\/\d{4}$/;                       

if (matchArray != null){
document.getElementById(idCampo).style.color="#000 ";
} else{ 
document.getElementById(idCampo).style.color="#f00 "; 
} 

</SCRIPT> 
</head> 

<body> 
<input type="text" id="acomprobar" onkeypress="fecha('acomprobar')"/>
</body> 
</html>

juanito1712 · #8 (**permalink**) 22/12/2011, 09:46

vale a ver, pasan varias cosas

1- te falta la llave para cerrar la función fecha

2-Los espacios que hay en los valores de los colores hay que borrarlos "#000";

3-has eliminado la variable matchArray

4-la expresión regular falla, en el último número parece que con un 3 va mejor
(no me entiendo demasiado todavia con expresiones regulares la verdad)

aqui el copypaste

Código:

<html> 
<head> 
   <SCRIPT LANGUAGE="JavaScript"> 

  function fecha(idCampo){ 
var datePat = /^(0[1-9]|1\d|2\d|3[1-2])\/(0[1-9]|1[0-2])\/\d{3}$/;                       
var matchArray =  
document.getElementById(idCampo).value.match(datePat); 
if (matchArray != null){
document.getElementById(idCampo).style.color="#000";
}else{ 
document.getElementById(idCampo).style.color="#f00"; 
} 
}

</SCRIPT> 
</head> 

<body> 
<input type="text" id="acomprobar" onkeypress="fecha('acomprobar')"/>
</body> 
</html>

de todos modos verás que mientras estas escribiendo la fecha lo marca como mal hasta que no has escrito todos los números, ahí ya no te puedo ayudar mucho

quizás contando el número de caracteres del campo y solo si es mayor a 10 ejecutar la función es una opción, no se si habrá forma de con una expresión regular ir contemplando los espacios en blanco pero como te he dicho no las domino mucho

jarjausroy · #9 (**permalink**) 23/12/2011, 01:48

perfecto, tira sin problema. Habria alguna manera ademas de añadirle al textarea la condicion de que si no se termina de poner el formato correcto te deje bloqueado en el texarea sin posibilidad de cambiar a otro???

SALUDOS Y GRACIAS POR LAS MOLESTIAS

juanito1712 · #10 (**permalink**) 23/12/2011, 03:08

quiza poniéndole una función en onlostfocus que vuelva a comprobar la expresion regular solo que en lugar de colorear el textfield haga que mueva el foco a ese campo en el caso de ser incorrecto