Validar formulario en javascript

[luismercado0209]

Hola tengo este código lo hice pero tengo un problema es que cuando valido y después corrijo si gue saliendo el texto del error
se supone que cuando se corrige se tiene que quitar el texto del error


Validacion

Código:

function validar(form) {
     var usuario1 = form.usuario.value.length;
     var contraseñas1 =form.contraseña.value;
     var contraseñas2 =form.contraseña2.value;
if (usuario1 < 4) {
        document.getElementById('error').style.visibility = 'visible';
        document.getElementById('input').style.borderColor = 'red';
        return false;}
    
    else

if (contraseñas1 == ""){
    document.getElementById('error2').style.visibility = 'visible';
    document.getElementById('input2').style.borderColor = 'red';
    return false;
}
    else
   
if (contraseñas2 == ""){
    document.getElementById('error3').style.visibility = 'visible';
    document.getElementById('input3').style.borderColor = 'red';
    return false;
}
    else
   
if (contraseñas1 != contraseñas2){
            document.getElementById('error4').style.visibility = 'visible';
            document.getElementById('input2').style.borderColor = 'red';
            document.getElementById('input3').style.borderColor = 'red';
            return false;
    }
}


</script>

Formulario

Código:

 <form id="form" action="base_datos.php" method="post" onsubmit="return validar(this)">
                
                
                <table align=center>
                <td colspan="2"><hr></td>
                <tr>
                    <td><div class="estilo3"><width>Usuario:</width></div></td>
                    <td><input id="input" type="text" name="usuario" class="input" title="Escriba el susuario aquí."></td>
                </tr>
                
                <tr>    
                    <td><div class="estilo3">Contraseña:</div></td>
                    <td><input id="input2" type="password" name="contraseña" class="input" title="Escriba la contraseña aquí."></td>
                </tr>
            
                <tr>
                    <td><div class="estilo3">Confirme <br>contraseña:</div></td>
                    <td><input id="input3" type="password" name="contraseña2" class="input" title="Verifique la contraseña aquí."></td>
                </tr>

<td colspan="2">
                    <p id="error" style="visibility:hidden">Longitud inválida</p>
                    <p id="error2" style="visibility:hidden">Dijite contraseña</p>
                    <p id="error3" style="visibility:hidden">Confierme la contraseña</p>
                    <p id="error4" style="visibility:hidden">Las contraseña no son iguales</p>
                    
                    <center><input type="submit" value="Registrarse" class="input2" title="Enviar Formulario."></center></td>

También quería saber como hacer para que no se repita un registro pero en javascript

[Danielfuzz]

cambia tu script por este

Código:

<script>
function validar(form) {
     var usuario1 = form.usuario.value.length;
     var contraseñas1 =form.contraseña.value;
     var contraseñas2 =form.contraseña2.value;
	 document.getElementById('error').style.visibility = 'hidden';
	 document.getElementById('error2').style.visibility = 'hidden';
    document.getElementById('error3').style.visibility = 'hidden';
     document.getElementById('error4').style.visibility = 'hidden';
if (usuario1 < 4) {
        document.getElementById('error').style.visibility = 'visible';
        document.getElementById('input').style.borderColor = 'red';
        return false;}
    
    else

if (contraseñas1 == ""){
    document.getElementById('error2').style.visibility = 'visible';
    document.getElementById('input2').style.borderColor = 'red';
    return false;
}
    else
   
if (contraseñas2 == ""){
    document.getElementById('error3').style.visibility = 'visible';
    document.getElementById('input3').style.borderColor = 'red';
    return false;
}
    else
   
if (contraseñas1 != contraseñas2){
            document.getElementById('error4').style.visibility = 'visible';
            document.getElementById('input2').style.borderColor = 'red';
            document.getElementById('input3').style.borderColor = 'red';
            return false;
    }
}


</script>

Saludos, no olvides el karma