Hola
Bier, Sería así:
Código HTML:
<html>
<head>
<script type="text/javascript">
function validar(frm) {
var resultado1 = frm.pepe.value.length > 3;
var resultado2 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})$/.test(frm.pepe2.value);
document.getElementById('error').style.visibility = (resultado1) ? 'hidden':'visible';
document.getElementById('input').style.borderColor = (resultado1) ? 'black':'red';
document.getElementById('input').style.color = (resultado1) ? 'black':'red';
document.getElementById('error2').style.visibility = (resultado2) ? 'hidden':'visible';
document.getElementById('input2').style.borderColor = (resultado2) ? 'black':'red';
document.getElementById('input2').style.color = (resultado2) ? 'black':'red';
return (resultado1 && resultado2);
}
</script>
</head>
<body>
<form action="procesa.php" method="post" onsubmit="return validar(this)">
<input type="text" name="pepe" id="input" style="border-width: 1px; border-style: solid; border-color: black"/>
<p id="error" style="visibility:hidden">Longitud inválida</p>
<input type="text" name="pepe2" id="input2" style="border-width: 1px; border-style: solid; border-color: black"/>
<p id="error2" style="visibility:hidden">E-mail inválido</p>
<input type="submit" />
</form>
</body>
</html>