Quiero validar unos input tipo texto en html, es decir que si los campos estan vacios el input submit no se activara(esta desabilitado por defecto), cuando estaba sin ningun diseño y por ejemplo al llenar los 4 campos se activa el boton, pero si borro el dato de un campo se desactiva, hasta ahi esta bien, pero al agregarle un diseño al boton ya no me funciona, porque claro lleno los 4 campos y el boton se activa, pero si borro el dato de un campo el boton no se desactiva, para hacer eso use un if para cambiar el id(con el cual enlazo a <style></style>), se como activar el button si los campos estan llenos, pero no como desactivar.
Lo que busco es que si al estar los campos llenos se active el boton, pero si en caso borre el dato de un campo vuelva a desactivarse.
----------------------------------------------------------------------------
<style>
#button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#envia {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
cursor: not-allowed;
}
---------------------------------------------------------------------------
Al estar desabilitado tiene un estilo, y al estar activado tiene otro estilo
Aqui dejo el codigo por si me pueden ayudar gracias.
-----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Submit disabled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#envia {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
cursor: not-allowed;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Definimos los campos que se han de verificar, contruimos un array con los id de los mismos
var campos = ["campo1", "campo2", "campo3", "campo4"];
function activar() {
var c = 0;
for(var i in campos){
i = parseInt(i);
var cadenaL = document.getElementById(campos[i]).value;
// hacemos un trim previo a la verificación
cadenaL = cadenaL.replace(/^\s+/g,'').replace(/\s+$/g,'')
if(cadenaL != ""){
c++; // incrementamos c por cada campo que no está vacío
}
if(c == (i+1)){ // si c es = al total de los campos habilitamos el submit
document.getElementById('envia').disabled = false;
}else{
document.getElementById('envia').disabled = true;
}
if (c==4) {
document.getElementById('envia').id = 'button';
}
}
}
// agregamos el evento onkeyup dinamicamente a los campos requeridos
window.onload = function(){
for(var e in campos){
var elem = document.getElementById(campos[e])
if (elem.addEventListener){
elem.addEventListener("keyup", function(){activar()}, false);
}else{ // <IE9
if (elem.attachEvent){
elem.attachEvent ("onkeyup", function () {activar(elem)});
}
}
}
}
//]]>
</script>
</head>
<body>
<input type="text" id="campo1" value="" /><br />
<input type="text" id="campo2" value="" /><br />
<input type="text" id="campo3" value="" /><br />
<input type="text" id="campo4" value="" /><br />
<input type="submit" id="envia" name="envia" value="procesar" disabled="disabled"/><br />
</body>
</html>
----------------------------------------------------------------------
