¿Cómo validar un formulario con javaScript?
De todoexpertos.com, verán tengo un formulario y quisiera validarlo instantáneamente, es decir, sin necesidad de realizar la validación al pulsar el botón de submit, ya lo he logrado, pero tengo un problema con los mensajes, quisiera mostrar el mensaje de validación enseguida del campo, o sea, que el mensaje no me salga en un alert(); para que la página quede más dinámica. Yo he conseguido un código en AJAX (livevalidation.com)que lo hace así como lo necesito pero no lo entiendo, y la verdad esto es para un proyecto y como entenderán no puedo presentar código extraño ya que tengo que sustentar el código.
1 respuesta
Respuesta de Marcelo Origoni
1
*************************
Claro, este es el formulario
*************************
<html>
<head>
<title>Encuesta</title>
<script language="javaScript1.3" src="validarCampos.js">
</script>
</head>
<body>
<h2>DATOS PERSONALES</h2>
<form action="" name="formulario">
<table border="0" cellspacing="10">
<tr>
<td>
Nombres:
</td>
<td>
<input type="text" name="nombres" size="20" maxlength="50" onBlur="CantidadCaracteres(3), campoObligatorio()">
</td>
</tr>
</table>
</form>
</body>
</html>
******************************
y este, el archivo validarCampos.js
******************************
function campoObligatorio()
{
valor = document.formulario.nombres.value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) )
{
alert("Campo obligatorio");
return false;
}
}
function CantidadCaracteres(cantidad)
{
valor = document.formulario.nombres.value.length;
if(valor>cantidad)
{
alert("verifique que la palabra no sobrepase los "+cantidad+" caracteres");
}
}
Claro, este es el formulario
*************************
<html>
<head>
<title>Encuesta</title>
<script language="javaScript1.3" src="validarCampos.js">
</script>
</head>
<body>
<h2>DATOS PERSONALES</h2>
<form action="" name="formulario">
<table border="0" cellspacing="10">
<tr>
<td>
Nombres:
</td>
<td>
<input type="text" name="nombres" size="20" maxlength="50" onBlur="CantidadCaracteres(3), campoObligatorio()">
</td>
</tr>
</table>
</form>
</body>
</html>
******************************
y este, el archivo validarCampos.js
******************************
function campoObligatorio()
{
valor = document.formulario.nombres.value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) )
{
alert("Campo obligatorio");
return false;
}
}
function CantidadCaracteres(cantidad)
{
valor = document.formulario.nombres.value.length;
if(valor>cantidad)
{
alert("verifique que la palabra no sobrepase los "+cantidad+" caracteres");
}
}
es muy sencillo, agrega una div, con id= mensaje, y luego reemplazas los alert por
document.getElementById('mensaje').innerHTML = [el mensaje que quieres mostrar]
A la div le puedes dar estilo mediante CSS
document.getElementById('mensaje').innerHTML = [el mensaje que quieres mostrar]
A la div le puedes dar estilo mediante CSS
