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:
Editado
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
Puntos
1738
Visitas
Visitas
3
Resp
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
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.
No daba con la tecla. He probado y el código va d lujo. Muchísimas gracias.
1
Puntos
Puntos
Por yukoh78 hace 71 meses
Principiante
Respuesta #3
perfecto yukoh me alegro de que te sirva! salu2
0
Puntos
Puntos
Por alber hace 71 meses
Administrador