Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Habilitar botón después de rellenar campos

Hola!!! Soy novato en este foro.
He creado un formulario con 3 campos para rellenar y un botón para enviar los datos. Quiero tener el botón deshabilitado hasta que se rellenen los 3 campos de forma correcta. ¿ Como puedo hacer esa operación ? Mi idea es crear otra función que compruebe que las tres funciones son true y así poder habilitar el botón pero no se como hacerlo.
El código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Validar Formularios</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
<script>

function validarNombre() {

var nombre = document.getElementById('nombre').value;
var errores = document.getElementById('nombreErrores');


if(nombre == ""){
errores.innerHTML ="Obligatorio rellenar Nombre";
return false;


}
else if (!/^([A-ZÁÉÍÓÚa-zñáéíóú]+[\s]*)+$/.test(nombre)){
errores.innerHTML ="El nombre no es válido";
return false;

}
else{
errores.innerHTML ="";
return true;
}

}




function validarTelefono(){

var telefono = document.getElementById('telef').value;
var errores = document.getElementById('telefonoErrores');

if(telefono ==''){
errores.innerHTML ="Obligatorio rellenar telefono";
return false;
}
else if (!/^[+]{1}[3]{1}[4]{1}[9|6]{1}[\d]{8}$/.test(telefono)){
errores.innerHTML ="El telefono no es válido.(Ej:+34677453245)";
return false;

}
else{
errores.innerHTML ="";
return true;
}

}




function validarPostal() {

var postal = document.getElementById('postal').value;
var errores = document.getElementById('postalErrores');

if(postal == ''){
errores.innerHTML ="Obligatorio rellenar Código Postal";
return false;

}
else if (!/^[0-5]{1}[\d]{4}$/.test(postal)){
errores.innerHTML ="El Código Postal no es válido";
return false;


}
else{
errores.innerHTML ="";
return true;
}
}
</script>

</head>
<body>
<h1>Formulario de Registro</h1>
<hr/>
<form class="registro" action="" id="form1" method="post" >
<h2 class="cuenta">CREA UNA CUENTA</h2>
<div class="contenedor_inputs">
<input type="text" placeholder="Nombre" id="nombre" onblur="validarNombre()" class="input-48" /><p id="nombreErrores"></p>
<input type="text" placeholder="Teléfono" id="telef" onblur="validarTelefono()" class="input-48"/><p id="telefonoErrores"></p>
<input type="text" placeholder="Código Postal" id="postal" onblur="validarPostal()" class="input-48"/><p id="postalErrores"></p>
<input type="submit" value=" Envíame el fichero de texto" id="boton" disabled="true" class="btn-enviar"/>
</div>
</form>
</body>

Editado
0
Puntos
1738
Visitas
3
Resp
Por yukoh78 hace 71 meses
Principiante
Respuesta #1
hola bienvenido! ya lo tienes casi todo hecho solo falta hacer un pequeña función que repase todas las validaciones por ejemplo:
function validartodo(){

     //Comprobamos que todos los campos están completos y sin mensajes de error
    if(document.getElementById('nombre').value!='' && document.getElementById('telef').value!='' && document.getElementById('postal').value!='' 
    && document.getElementById('nombreErrores').innerHTML=='' && document.getElementById('telefonoErrores').innerHTML=='' && document.getElementById('postalErrores').innerHTML==''){

    document.getElementById("boton").disabled = false;

  } else {
     document.getElementById("boton").disabled = true;
  }

}
y puedes ir invocándola cada vez que se valida un paso por ejemplo después de cada uno de tus return true:
function validarTelefono(){

var telefono = document.getElementById('telef').value;
var errores = document.getElementById('telefonoErrores');

if(telefono ==''){
errores.innerHTML ="Obligatorio rellenar telefono";
return false;
}
else if (!/^[+]{1}[3]{1}[4]{1}[9|6]{1}[\d]{8}$/.test(telefono)){
errores.innerHTML ="El telefono no es válido.(Ej:+34677453245)";
return false;

}
else{
errores.innerHTML ="";
//Comprobamos todas las validaciones 
validartodo(); // <----------------------
return true;
}

}
prueba y nos cuentas salu2
3
Puntos
Por alber hace 71 meses
Administrador
Respuesta #2
Genial Alber!!!
No daba con la tecla. He probado y el código va d lujo. Muchísimas gracias.
1
Puntos
Por yukoh78 hace 71 meses
Principiante
Respuesta #3
perfecto yukoh me alegro de que te sirva! salu2
0
Puntos
Por alber hace 71 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate