Foros del Web » Programando para Internet » Javascript »

marcar campos vacios

 Estas en el tema de marcar campos vacios en el foro de Javascript en Foros del Web. ola gracias por su apoyo aora tengo el siguiente problema quiero que al darle clic al submit me marca con un color todos los campos ...
  #1 (permalink)  
Antiguo 13/09/2011, 14:59
 
Fecha de Ingreso: junio-2011
Mensajes: 59
Antigüedad: 12 años, 10 meses
Puntos: 0
Pregunta marcar campos vacios
ola gracias por su apoyo aora tengo el siguiente problema
quiero que al darle clic al submit me marca con un color todos los campos vacios, ya logro marcarlo pero solo lo ace unos por uno y quiero que al momento de dar el enviar me marque en color los que estan vacios
este es mi codigo de validacion les agradecere su ayuda
Código Javascript: 
Ver original
  1. function validar(formInicio) {
  2.      
  3.   if (document.formInicio.ciudadPickUp.value==""){
  4.    document.getElementById('ciudadPickUp').className="borde";
  5.    //document.formInicio.ciudadPickUp.focus() 
  6.    document.location.href="#ancla";
  7.    
  8.    return false;
  9.   }
  10.   if (document.formInicio.pickUp.value=="") {
  11.    document.getElementById('pickUp').className="borde";
  12.    return false;
  13.   }
  14.   if (document.formInicio.dropOff.value=="") {
  15.    document.getElementById('dropOff').className="borde";
  16.    
  17.    return false;
  18.   }
  19.   if (document.formInicio.hrInicio.value=="") {
  20.    document.getElementById('hrInicio').className="borde";
  21.    
  22.    return false;
  23.   }
  24.   
  25.   if (document.formInicio.hrFin.value=="") {
  26.    document.getElementById('hrFin').className="borde";  
  27.    return false;
  28.   }
  29. }

y este es mi form

Código HTML: 
Ver original
  1. <form action="seleccionaAuto.php" method="POST" name="formInicio" id="formInicio" onSubmit="return validar(this);" >
  2.             <div class="linea"></div>
  3.                         <p ></p>
  4.                         <a name="ancla"> </a>
  5.             <p class="txtcot">CIUDAD DE RENTA:</p>
  6.             <p class="txtsel"> <select class="c1" id="ciudadPickUp" name="ciudadPickUp">
  7.                                   <option value="">-- Seleccione una Ciudad --</option>
  8.                                     <?php
  9.                                         $link = $pag->conecta("nacional");
  10.                                         $sql = "
  11.                                         SELECT *
  12.                                         FROM  `directorio`
  13.                                         ORDER BY  `directorio`.`ciudad` ASC
  14.                                      ";
  15.                                         $ciudades = $pag->_SQL($sql, "objeto", "nacional");
  16.                                         foreach($ciudades as $ind => $val){
  17.                                             echo "<option value='".$ciudades[$ind]->clave."' class='selectItem' >".ucwords($ciudades[$ind]->ciudad)."</option>";
  18.                                         }
  19.                                         mysql_close($link);
  20.                                         echo "<input type='hidden' value='".date('Y-m-d')."' id='hoyes'/>";
  21.                                     ?>
  22.                 </select>
  23.                             
  24.                            
  25.             </p>
  26.             <p class="txtcot"><label for="lRenta">LUGAR DE RENTA:</label></p>
  27.             <p class="txtsel"><select class="c1" name="pickUp" id="pickUp">
  28.                     <option value="">-- Seleccione Opcion --</option>
  29.                      <option value="Aeropuerto">Aeropuerto</option>
  30.                                 <option value="Centro">Centro</option>
  31.                 </select>
  32.             </p>
  33.             <p class="txtcot"><label for="devolucion">LUGAR DE DEVOLUCION:</label></p>
  34.             <p class="txtsel"><select class="c1" name="dropOff" id="dropOff">
  35.                      <option value="">-- Seleccione Opcion --</option>
  36.                      <option value="Aeropuerto">Aeropuerto</option>
  37.                                  <option value="Centro">Centro</option>
  38.                 </select></p>
  39.             <p class="txtcot"><label for="fecha_renta">FECHA DE RENTA:</label></p>
  40.             
  41.             <p class="txtcot"><label for="hora_renta">HORA DE RENTA:</label></p>
  42.             <p class="txtsel"><select class="c3" name="hrInicio" id="hrInicio">
  43.                 <?php
  44.                                         date_default_timezone_set('Mexico/General');
  45.                                         for($hora=0; $hora <= 24; $hora++){
  46.                                             $check = "";
  47.                                             if($hora < 10)
  48.                                                 $formatoHora = "0".$hora;
  49.                                             else
  50.                                                 $formatoHora = $hora;
  51.                                             $horaActual = date('H')+1;
  52.  
  53.                                             if($horaActual == $hora)
  54.                                                 $check = "selected";
  55.  
  56.                                             echo "<option $check value='$formatoHora'>$formatoHora</option>";
  57.                                         }
  58.                                     ?>
  59.                     </select>
  60.                 <label>:</label>
  61.                     <select class="c3" name="hrInicio" id="hrInicio">
  62.                                         <option>00</option>
  63.                                         <option>15</option>
  64.                                         <option>30</option>
  65.                                         <option>45</option>
  66.                 </select>
  67.                 
  68.             </p>
  69.             <p class="txtcot"><label for="fecha_devolucion">FECHA DE DEVOLUCION:</label></p>
  70.             
  71.             <p class="txtcot">HORA DE DEVOLUCIÓN:</p>
  72.             <p><select class="c3" name="hrFin" id="hrFin">
  73.                 <?php
  74.                                         date_default_timezone_set('Mexico/General');
  75.                                         for($hora=0; $hora <= 24; $hora++){
  76.                                             $check = "";
  77.                                             if($hora < 10)
  78.                                                 $formatoHora = "0".$hora;
  79.                                             else
  80.                                                 $formatoHora = $hora;
  81.                                             $horaActual = date('H')+1;
  82.  
  83.                                             if($horaActual == $hora)
  84.                                                 $check = "selected";
  85.  
  86.                                             echo "<option $check value='$formatoHora'>$formatoHora</option>";
  87.                                         }
  88.                                     ?>
  89.                     </select>
  90.                 <label>:</label>
  91.                     <select class="c3" name="hrFin" id="hrFin">
  92.                                             <option>00</option>
  93.                                             <option>15</option>
  94.                                             <option>30</option>
  95.                                             <option>45</option>
  96.                 </select>
  97.             </p>
  98.             <p class="bt_enviar"><input type="submit" value="Mostrar autos y tarifas" id="btnCotizar"/></p>
  99.                         </form>
  #2 (permalink)  
Antiguo 13/09/2011, 17:53
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 13 años, 7 meses
Puntos: 59
Borra las sentencias return, ya que esa sentencia termina la función.

__________________
01011111 01000001 01100100 01110010 01101001 01100001 01101110 01011111
  #3 (permalink)  
Antiguo 13/09/2011, 22:03
Avatar de gustavopino  
Fecha de Ingreso: septiembre-2011
Ubicación: venezuela
Mensajes: 152
Antigüedad: 12 años, 7 meses
Puntos: 29
Respuesta: marcar campos vacios
Has esto primero una funcion con un switch/case con con todas las variables yo lo hice en jquery pero lo puedes modificar:
Código Javascript: 
Ver original
  1. function checkFieldTask (aFieldName) {        
  2. var bool = true;        
  3. switch (aFieldName) {                
  4.                 
  5. case "nombre":                        
  6. if ($("#"+aFieldName).val()=="") {                                
  7. failField(aFieldName,"Nombre(s) es obligatorio.");
  8. error();
  9. bool = false;                        
  10. } else {                                
  11. passField(aFieldName);                        
  12. }                        
  13. break;
  14. case "correo":                        
  15. if ($("#"+aFieldName).val()=="") {
  16. failField(aFieldName,"Correo electrónico es obligatorio.");
  17. error();                                 
  18. bool = false;                        
  19. } else {
  20.     var valor = document.getElementById("correo").value;
  21.     if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($("#"+aFieldName).val()))
  22.  
  23. {
  24.     failField(aFieldName,"Introduzca un correo electrónico válido.");
  25.     bool = false;   
  26. }else{
  27. passField(aFieldName);
  28. }
  29. }                        
  30. break;
  31. case "mensaje":                        
  32. if ($("#"+aFieldName).val()=="") {                                
  33. failField(aFieldName,"Mensaje es obligatorio.");
  34. error();
  35. bool = false;                        
  36. } else {                                
  37. passField(aFieldName);                        
  38. }                        
  39. break;
  40. }        
  41. return bool;
  42. }

Luego haces estas funciones para imprimir los errores:

Código Javascript: 
Ver original
  1. function failField (aFieldName,msg) {        
  2. $("#form_alert_"+aFieldName+"_msg").remove();       
  3. $("#"+aFieldName).after(alertMsgHTML(aFieldName,msg));
  4. }
  5. //esta function es para agregar en html el mensaje de error 
  6. function alertMsgHTML (aFieldName, msg) {        
  7. $('<li id="form_alert_'+aFieldName+'_msg"></li>').appendTo('#lista').html(msg);
  8. //return '<div id="form_alert_'+aFieldName+'_msg" class="error">'+msg+'</div>';
  9. }

Luego agrega esta funcion para remover las etiqueta de error:

Código Javascript: 
Ver original
  1. function passField (aFieldName) {        
  2. $("#form_alert_"+aFieldName+"_msg").remove();
  3. }

y por ultimo has esta funcion para validar todos los campos del formulario:

Código Javascript: 
Ver original
  1. function checkField (aField) {        
  2. return checkFieldTask(aField.name);
  3. }
  4. function checkForm (aForm) {        
  5. var bool = true;        
  6. for (var i=0; i < aForm.elements.length; i++) {                
  7. if(!checkFieldTask(aForm.elements[i].name)) {                        
  8. bool = false;                
  9. }        
  10. }        
  11. if (bool) {                               
  12. // si bool es true envio el formulario
  13. document.f.submit();
  14. $('#subbtn').css("display","block");
  15. $('#subbtn').attr("disabled","disabled");
  16. $('#t').html("Enviando...");
  17. } else {
  18. // si bool el false                
  19. failField("subbtn","Por favor resuelva este error antes de continuar.");
  20. }
  21. return bool;
  22. }

Ten encuenta que jquery es lo mismo que javascript asi que puedes modificar este codigo a tu antojo y que este codigo es un ejemplo para que te guies
__________________
Visita a Publiventa donde compras y vendes de todo

Etiquetas: campos, marcar, php, vacios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:45.