<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script>
function validar()
{
var nombre=document.forms.MiFormulario.nombre;
var codigo=document.forms.MiFormulario.codigo;
if(nombre.value.length>0)
{
// el nombre tiene mas de un caracter
nombre.style.borderColor="#808080";
var nombreOk=true;
}else{
// el nombre es incorrecto
nombre.style.borderColor="#ff0000";
var nombreOk=false;
}
if(codigo.value.length==4)
{
// el codigo tiene los 4 digitos
codigo.style.borderColor="#808080";
var codigoOk=true;
}else{
// el codigo es incorrecto
codigo.style.borderColor="#ff0000";
var codigoOk=false;
}
// Si el nombre y el código son correctos...
if(nombreOk && codigoOk)
return true;
// Si devuelve false, no permite que se envie el formulario
return false;
}
</script>
<style>
input[type=text] {border:1px solid #808080;}
input[type=submit] {display:block;}
form span {display:inline-block;width:100px;}
</style>
</head>
<body>
<form action="pagina.php" method="post" onsubmit="return validar();" name="MiFormulario">
<span>Nombre:</span> <input type="text" name="nombre" onkeyup=validar();>
<br><span>Código:</span> <input type="text" name="codigo" onkeyup=validar();> (4 caracteres)
<input type="submit" value="Enviar">
</form>
</body>
</html>
Comentarios sobre la versión: Versión 1 (6)