Hola a todos. Tengo el siguiente código php/ajax con el que intento validar los datos introducidos en un formulario:
En primer lugar el formulario:
Código PHP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Formulario de contacto en AJAX</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<div id="formContenedor">
<form id="formulario">
<div id="transparencia">
<div id="transparenciaMensaje">aaaaaaaaaaaa</div>
</div>
<table>
<tbody>
<tr>
<td class="label">Nombre:</td>
<td class="campo"><input class="inputNormal" type="text" id="inputNombre"></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Nombre')"></td>
</tr>
<tr>
<td class="label">Password:</td>
<td class="campo"><input class="inputNormal" type="password" id="inputPassword"></td>
<td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Password')"></td>
</tr>
</tbody>
</table>
<br>
<div>
<button id="botonEnviar" onClick="validaForm()" type="button">Enviar</button>
<button type="reset">Borrar</button>
</div>
</form>
</div>
<!-- Capa para mostrar los mensajes de ayuda al presionar los iconos correspondientes -->
<div id="mensajesAyuda">
<div id="ayudaTitulo"></div>
<div id="ayudaTexto"></div>
</div>
</body>
</html>
Como podéis comprobar el botón enviar está asociado mediante el evento onclick a la función validaForm() definida en el script funciones.js. A continuación muestro el código de dicha función:
Código PHP:
function validaForm()
{
limpiaForm();
error=0;
var nombre=eliminaEspacios(form.inputNombre.value);
var password=eliminaEspacios(form.inputPassword.value);
if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
if(!validaLongitud(password, 1, 4, 50)) campoError(form.inputPassword);
if(error==1)
{
var texto="<img src='error.gif' alt='Error'><br><br>Error: revise los campos en rojo.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
muestraMensaje(texto);
}
else
{
var texto="<img src='loading.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
muestraMensaje(texto);
var ajax=nuevoAjax();
ajax.open("POST", urlDestino, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("nombre="+nombre+"&password="+password);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
var respuesta=ajax.responseText;
if(respuesta=="OK")
{
var texto="<img src='ok.gif' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
}
else var texto="<img src='error.gif'><br><br>Error: intente más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
muestraMensaje(texto);
}
}
}
}
El problema es que al clickar el botón enviar no ocurre absolutamente nada. ¿Alguien podría decirme qué es lo que estoy haciendo mal?
Un saludo a todos y gracias de antemano.