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
1665
Visitas
Visitas
3
Resp
Resp
Por yukoh78 hace 7 años
Novice
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 7 años
Admin
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 7 años
Novice
Respuesta #3
perfecto yukoh me alegro de que te sirva! salu2
0
Puntos
Puntos
Por alber hace 7 años
Admin