Tema: "Juntar" dos javascript
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 18/05/2011, 16:50
Avatar de Hugo_Euan
Hugo_Euan
 
Fecha de Ingreso: abril-2011
Ubicación: Mérida, Yucatán, México
Mensajes: 193
Antigüedad: 13 años
Puntos: 71
Respuesta: "Juntar" dos javascript
=D ok, creo que ahora si te voy entendiendo mejor...

Le dí una mirada al código que posteaste y vamos a tratar de optimizarlo un poco y hacerlo mas entendible =D
bueno, vamos a armar lo que necesitas...

el primer evento de revisar cuantos caracteres tiene el objeto requiere que la función se ejecute constantemente mientras se está en el formulario, para ello haremos uso de un timer en vez del evento Keydown del objeto =D

y armamos la función que validará el número de caracteres para lo cual queda de la siguiente manera:

Código Javascript: 
Ver original
  1. var timer = setInterval('COUNT_CHARACTERS();', 10);
  2.  
  3. function COUNT_CHARACTERS(){
  4.    var MyElement = document.getElementById('Comentarios');
  5.    var Count = document.getElementById('Count');
  6.    Count.innerHTML = 'Comentarios: ('+MyElement.value.length+' / 99)';
  7.    if(MyElement.value.length > 99){
  8.       MyElement.value = MyElement.value.substring(0,99);
  9.    }
  10. }

Lo que hace esta función es obtener el id del objeto mediante document.getElementById

y mediante estas dos lineas mostramos al usuario cuantos cacteres maximo puede usar y cuantos a usado, tipo (10 / 99) etc...


var Count = document.getElementById('Count');
Count.innerHTML = 'Comentarios: ('+MyElement.value.length+' / 99)';


y pondrias en tu html el campo que quieres delimitar:
<input type="text" id="Comentarios" /> ó <textarea id="Comentarios"></textarea>

de esa manera podrás validar que no se sobrepase de 99 caracteres.
ahora al siguiente paso, validar que los campos no esten vacios y que el email sea válido.
para ello la función quedaria de la siguiente manera:

Código Javascript: 
Ver original
  1. var Debugger;
  2. var Proceded
  3.  
  4. function VALIDATE_FIELDS(){
  5.    Debugger='Se han encontrado los siguientes errores: \n \n';
  6.    Proceded=true;
  7.    var Fields = ['Nombre', 'Direccion', 'Edad', 'Mail', 'Pais', 'campo_N...'];
  8.    for(var i=0; i<Fields.length;i++){
  9.       var MyField = document.getElementById(Fields[i]);
  10.       if(Fields[i] == 'Mail'){
  11.          if(MyField.value.indexOf('@')==-1){
  12.             Debugger=Debugger+'* El email proporcionado es incorrecto. \n';
  13.             Proceded=false;
  14.          }
  15.       }else{
  16.          if(MyField.value == ''){
  17.             Debugger=Debugger+'* El campo '+Fields[i]+' no puede estar vacio. \n';
  18.             Proceded=false;
  19.          }
  20.       }
  21.    }
  22.    if(Proceded){
  23.       document.forms["MyData"].submit();
  24.    }else{
  25.       alert(Debugger);
  26.    }
  27. }

En esta función lo que se hace es sencillo, mediante la variable Debugger controlamos los errores que reportaremos al usuario y Proceded es una variable de tipo boleano, que nos indicara si todo salio correcto, si es así hacemos el submit del form, y si no imprimimos los erroes encontrados.

if(Proceded){
document.forms["MyData"].submit();
}else{
alert(Debugger);
}

también declaramos una variable que contiene todos los id de los elementos de nuestro formulario

var Fields = ['Nombre', 'Direccion', 'Edad', 'Mail', 'Pais', 'campo_N...'];

el cual recorreremos mediante un for para ir asignandoselos a la variable MyField

si MyField[i] vale 'Mail'

validamos que el email sea correcto, pero si MyField[i] no vale 'Mail' entonces quiere decir que se trata de otro campo y validamos que no se encuentre vacio

if(Fields[i] == 'Mail'){
if(MyField.value.indexOf('@')==-1){
Debugger=Debugger+'* El email proporcionado es incorrecto. \n';
Proceded=false;
}
}else{
if(MyField.value == ''){
Debugger=Debugger+'* El campo '+Fields[i]+' no puede estar vacio. \n';
Proceded=false;
}
}
}

el ejemplo queda de la siguiente manera y así de esta misma manera la puedes implementar en tu formulario.
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <title>ejemplo</title>
  4. <script>
  5. var timer = setInterval('COUNT_CHARACTERS();', 10);
  6. var Debugger;
  7. var Proceded;
  8.  
  9. function COUNT_CHARACTERS(){
  10.     var MyElement = document.getElementById('Comentarios');
  11.     var Count = document.getElementById('Count');
  12.     Count.innerHTML = 'Comentarios: ('+MyElement.value.length+' / 99)';
  13.     if(MyElement.value.length > 99){
  14.         MyElement.value = MyElement.value.substring(0,99);
  15.     }
  16. }
  17.  
  18. function VALIDATE_FIELDS(){
  19.   Debugger='Se han encontrado los siguientes errores: \n \n';
  20.   Proceded=true;
  21.   var Fields = ['Nombre', 'Direccion', 'Edad', 'Mail', 'Pais', 'campo_N...'];
  22.   for(var i=0; i<Fields.length;i++){
  23.       var MyField = document.getElementById(Fields[i]);
  24.       if(Fields[i] == 'Mail'){
  25.           if(MyField.value.indexOf('@')==-1){
  26.               Debugger=Debugger+'* El email proporcionado es incorrecto. \n';
  27.               Proceded=false;
  28.           }
  29.       }else{
  30.           if(MyField.value == ''){
  31.               Debugger=Debugger+'* El campo '+Fields[i]+' no puede estar vacio. \n';
  32.               Proceded=false;
  33.           }
  34.       }
  35.   }
  36.   if(Proceded){
  37.       document.forms["MyData"].submit();
  38.   }else{
  39.       alert(Debugger);
  40.   }
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <form name="MyData" action="archivo.php" method="post">
  46.     <label id="Count">Comentarios:</label><br /><textarea id="Comentarios">Aquí tus comentarios</textarea><br />
  47.     Nombre:<br /><input type="text" id="Nombre" /><br />
  48.     Direccion:<br /><input type="text" id="Direccion" /><br />
  49.     Edad:<br /><input type="text" id="Edad" /><br />
  50.     E-Mail:<br /><input type="text" id="Mail" /><br />
  51.     Pais:<br /><input type="text" id="Pais" /><br />
  52.     Campo_N...:<br /><input type="text" id="campo_N..." /><br />
  53.     <input type="button" onClick="VALIDATE_FIELDS();" value="imprimir alerta" />
  54. </form>
  55. </body>
  56. </html>

es muy importante que te des cuenta de que para validar el formulario ya no se está utilizando un SUBMIT, se está utilizando un button

<input type="button" onClick="VALIDATE_FIELDS();" value="Enviar formulario" />

de esta manera ya tenemos unidos tus dos scripts y de una manera mas entendible, bueno al menos eso creo, jejeje.

Espero que te sea de ayuda y que si resuelva tu inconveniente.

SALUDOS y EXITO !!!!

=D
__________________
Se acepta Karma (:

Si Dios con nosotros, quien contra nosotros !!