Cita:
Iniciado por sycrox2 Aquí está el código de emprear con algunas correcciones para que no detecte los espacios que comentaba y también para arreglar un pequeño detalle (el botón se habilitaba al escribir únicamente en el último campo); en mi opinión es algo inseguro dejar la validación sólo en el lado del cliente, así que debería también procurar hacerla en el servidor.
Para controlar lo de espacios en blanco(barra espaciadora), utilicé el replace(/\s/g,'') donde /\s/g es una pequeña expresión regular que saca todos los espacios en blanco dentro de una cadena
Gracias por la corrección. Ya lo arreglé haciendo un par de modificaciones, y le hice ya que estamos el trim para los value y agregué el evento onkeyup dinamicamente
Código HTML:
Ver original<!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"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <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;
}
}
}
// 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)});
}
}
}
}
//]]>
<form action="#" method="post"> <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 />
Demo
http://foros.emprear.com/javascript/...submit_ok.html
Saludos