Bueno ... buscando , buscando y con algunas modificaciones se pudo por fin validar .... espero le sirva a alguien que tambien tenga el mismo requerimiento.
index.php
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>.:: Validator ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript" src="clsValidator.js">
/****************************************************************************
* VALIDADOR DE FECHA EN DISTINTOS FORMATOS
****************************************************************************/
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function validate()
{
var Validar = new clsValidator();
//**********************************************************
//Uso todos los valores por defecto
//**********************************************************
//Se podrian cambiar:
//Validar.setEncabezado("[- Hay errores en el formulario -]");
//Validar.setErrorColor("#FFCC00");
//validar.setFormatoHora('24');
//validar.setFormatoFecha('ISO');
//5- Valido que la fecha sea correcta
Validar.Fecha("fechaNac", "Fecha no válida");
//Disparo la Validación
if (Validar.Validar()) alert("El formulario está bien completo, submiting data...");
else Validar.getErrors();
}
//-->
</script>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="275" border="0" align="left" cellpadding="0" cellspacing="0" class="txtNegro">
<tr>
<td><div align="right">Fecha de nacimiento:</div></td>
<td width="120"> <input name="fechaNac" type="text" class="campos" id="fechaNac">
</td>
</tr>
<tr>
<td> </td>
<td><div align="right">
<input name="Button" type="button" class="botones" onClick="validate()" value="validar">
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
clsValidator.js
Código PHP:
/****************************************************************************/
function clsValidator()
{
/* Data members */
this.msgError=""; // Return the msg error
this.errorColor="#FFC1C1"; // color de error x defecto
this.head = "ERROR: ... "; // encabezado del mensaje de error x defecto
this.formatoFecha = "ISO" // formato de fecha x defecto
this.error = false;
/* Methods */
///////////////////////////////////////////////////////////
function setEncabezado(head)
{
this.head = head;
}
///////////////////////////////////////////////////////////
function AgregarError() {
this.error=true;
this.msgError += "* "+arguments[0]+"\n";
for (var i=1; i < arguments.length ; i++)
{
document.getElementById(arguments[i]).style.backgroundColor=this.errorColor;
}
}
///////////////////////////////////////////////////////////
function EliminarError()
{
for (var i=0; i < arguments.length ; i++)
{
document.getElementById(arguments[i]).style.backgroundColor="";
}
}
///////////////////////////////////////////////////////////
function setErrorColor(color)
{
this.errorColor = color;
}
///////////////////////////////////////////////////////////
function setFormatoFecha(value)
{
this.formatoFecha = value;
}
///////////////////////////////////////////////////////////
function Vacio(field,msg)
{
this.EliminarError(field);
if (document.getElementById(field).value.replace(/ /g, '') == "")
{
this.AgregarError(msg, field);
return false
}
return true
}
///////////////////////////////////////////////////////////
function Fecha(field, msg)
{
this.EliminarError(field);
var datePat;
var formatoCorrecto;
switch(this.formatoFecha) {
case 'ISO':
datePat = /^(?:(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(/|-|.)(?:0?21(?:29))$)|(?:(?:1[6-9]|[2-9]d)?d{2})(/|-|.)(?:(?:(?:0?[13578]|1[02])2(?:31))|(?:(?:0?[1,3-9]|1[0-2])2(29|30))|(?:(?:0?[1-9])|(?:1[0-2]))2(?:0?[1-9]|1d|2[0-8]))$/;
formatoCorrecto = "aaaa/mm/dd";
break;
case 'EURO':
datePat = /^((([0][1-9]|[12][d])|[3][01])[-/]([0][13578]|[1][02])[-/][1-9]ddd)|((([0][1-9]|[12][d])|[3][0])[-/]([0][13456789]|[1][012])[-/][1-9]ddd)|(([0][1-9]|[12][d])[-/][0][2][-/][1-9]d([02468][048]|[13579][26]))|(([0][1-9]|[12][0-8])[-/][0][2][-/][1-9]ddd)$/;
formatoCorrecto = "dd/mm/aaaa";
break;
case 'ANSI':
datePat = /^((d{2}(([02468][048])|([13579][26]))[-/s]?((((0?[13578])|(1[02]))[-/s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[-/s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[-/s]?((0?[1-9])|([1-2][0-9])))))|(d{2}(([02468][1235679])|([13579][01345789]))[-/s]?((((0?[13578])|(1[02]))[-/s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[-/s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[-/s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(s(((0?[1-9])|(1[0-2])):([0-5][0-9])((s)|(:([0-5][0-9])s))([AM|PM|am|pm]{2,2})))?$/;
formatoCorrecto = "aaaa/mm/dd hh:mm:ss am/pm";
break;
}
var matchArray = document.getElementById(field).value.match(datePat);
if (matchArray != null) return true
else
{
msg += ' [formato: '+formatoCorrecto+']'
this.AgregarError(msg, field);
return false;
}
}
///////////////////////////////////////////////////////////
function Longitud(field, operator, length, msg)
{
this.EliminarError(field);
if (operator == "=") operator = "==";
if ( !(eval("document.getElementById(field).value.length "+operator+" length")) )
{
this.AgregarError(msg, field);
return false
}
return true
}
///////////////////////////////////////////////////////////
function Valor(field, operator, valor, msg)
{
this.EliminarError(field);
if (operator == "=") operator = "==";
if ( !(eval("document.getElementById(field).value "+operator+" valor")) )
{
this.AgregarError(msg, field);
return false
}
return true
}
///////////////////////////////////////////////////////////
function Validar()
{
return !this.error;
}
///////////////////////////////////////////////////////////
function getErrors()
{
alert(this.head+"\n\n"+this.msgError);
}
///////////////////////////////////////////////////////////
this.setEncabezado = setEncabezado;
this.setErrorColor = setErrorColor;
this.setFormatoFecha = setFormatoFecha;
this.getErrors = getErrors;
this.AgregarError = AgregarError;
this.EliminarError = EliminarError;
this.Vacio = Vacio;
this.Fecha = Fecha;
this.Validar = Validar;
}
//////////////////////////////////////////////////////////////////
estilos.css
Código PHP:
.campos {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #e6e6e6;
border: 1px solid #333333;
width: 120px;
}
.body {
background-color: #ffffff;
}
.botones {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #993300;
background-color: #CCCCCC;
border: 1px solid #000000;
}
.linkAzul {
font-family: "MS Sans Serif", Arial;
font-size: 11px;
color: #025587;
TEXT-DECORATION: underline;
}
.subMenuMovil {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #02466F;
TEXT-DECORATION: none;
}
.tituloTrabajo {
font-family: "MS Sans Serif", Arial;
font-size: 11px;
color: #993400;
TEXT-DECORATION: none;
text-transform: uppercase;
font-weight: bold;
}
.txtGris {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
.txtNegro {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
TEXT-DECORATION: none;
text-transform: none;
}
.... esta super ....