marcar campos vacios

[kinto]

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:

function validar(formInicio) {
     
  if (document.formInicio.ciudadPickUp.value==""){
   document.getElementById('ciudadPickUp').className="borde";
   //document.formInicio.ciudadPickUp.focus() 
   document.location.href="#ancla";
   
   return false;
  }
  if (document.formInicio.pickUp.value=="") {
   document.getElementById('pickUp').className="borde";
   return false;
  }
  if (document.formInicio.dropOff.value=="") {
   document.getElementById('dropOff').className="borde";
   
   return false;
  }
  if (document.formInicio.hrInicio.value=="") {
   document.getElementById('hrInicio').className="borde";
   
   return false;
  }
  
  if (document.formInicio.hrFin.value=="") {
   document.getElementById('hrFin').className="borde";  
   return false;
  }
}
 

y este es mi form

Código HTML:

<form action="seleccionaAuto.php" method="POST" name="formInicio" id="formInicio" onSubmit="return validar(this);" >
            <div class="linea"></div>
                        <p ></p>
                        <a name="ancla"> </a>
            <p class="txtcot">CIUDAD DE RENTA:</p>
            <p class="txtsel"> <select class="c1" id="ciudadPickUp" name="ciudadPickUp">
                                  <option value="">-- Seleccione una Ciudad --</option>
                                    <?php
                                        $link = $pag->conecta("nacional");
                                        $sql = "
                                        SELECT *
                                        FROM  `directorio`
                                        ORDER BY  `directorio`.`ciudad` ASC
                                     ";
                                        $ciudades = $pag->_SQL($sql, "objeto", "nacional");
                                        foreach($ciudades as $ind => $val){
                                            echo "<option value='".$ciudades[$ind]->clave."' class='selectItem' >".ucwords($ciudades[$ind]->ciudad)."</option>";
                                        }
                                        mysql_close($link);
                                        echo "<input type='hidden' value='".date('Y-m-d')."' id='hoyes'/>";
                                    ?>
                </select>
                            
                           
            </p>
            <p class="txtcot"><label for="lRenta">LUGAR DE RENTA:</label></p>
            <p class="txtsel"><select class="c1" name="pickUp" id="pickUp">
                    <option value="">-- Seleccione Opcion --</option>
                     <option value="Aeropuerto">Aeropuerto</option>
                                <option value="Centro">Centro</option>
                </select>
            </p>
            <p class="txtcot"><label for="devolucion">LUGAR DE DEVOLUCION:</label></p>
            <p class="txtsel"><select class="c1" name="dropOff" id="dropOff">
                     <option value="">-- Seleccione Opcion --</option>
                     <option value="Aeropuerto">Aeropuerto</option>
                                 <option value="Centro">Centro</option>
                </select></p>
            <p class="txtcot"><label for="fecha_renta">FECHA DE RENTA:</label></p>
            
            <p class="txtcot"><label for="hora_renta">HORA DE RENTA:</label></p>
            <p class="txtsel"><select class="c3" name="hrInicio" id="hrInicio">
                <?php
                                        date_default_timezone_set('Mexico/General');
                                        for($hora=0; $hora <= 24; $hora++){
                                            $check = "";
                                            if($hora < 10)
                                                $formatoHora = "0".$hora;
                                            else
                                                $formatoHora = $hora;
                                            $horaActual = date('H')+1;
 
                                            if($horaActual == $hora)
                                                $check = "selected";
 
                                            echo "<option $check value='$formatoHora'>$formatoHora</option>";
                                        }
                                    ?>
                    </select>
                <label>:</label>
                    <select class="c3" name="hrInicio" id="hrInicio">
                                        <option>00</option>
                                        <option>15</option>
                                        <option>30</option>
                                        <option>45</option>
                </select>
                
            </p>
            <p class="txtcot"><label for="fecha_devolucion">FECHA DE DEVOLUCION:</label></p>
            
            <p class="txtcot">HORA DE DEVOLUCIÓN:</p>
            <p><select class="c3" name="hrFin" id="hrFin">
                <?php
                                        date_default_timezone_set('Mexico/General');
                                        for($hora=0; $hora <= 24; $hora++){
                                            $check = "";
                                            if($hora < 10)
                                                $formatoHora = "0".$hora;
                                            else
                                                $formatoHora = $hora;
                                            $horaActual = date('H')+1;
 
                                            if($horaActual == $hora)
                                                $check = "selected";
 
                                            echo "<option $check value='$formatoHora'>$formatoHora</option>";
                                        }
                                    ?>
                    </select>
                <label>:</label>
                    <select class="c3" name="hrFin" id="hrFin">
                                            <option>00</option>
                                            <option>15</option>
                                            <option>30</option>
                                            <option>45</option>
                </select>
            </p>
            <p class="bt_enviar"><input type="submit" value="Mostrar autos y tarifas" id="btnCotizar"/></p>
                        </form>
 

[_Adrian_]

Borra las sentencias return, ya que esa sentencia termina la función.

[gustavopino]

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:

function checkFieldTask (aFieldName) {        
var bool = true;        
switch (aFieldName) {                
                
case "nombre":                        
if ($("#"+aFieldName).val()=="") {                                
failField(aFieldName,"Nombre(s) es obligatorio.");
error();
bool = false;                        
} else {                                
passField(aFieldName);                        
}                        
break;
case "correo":                        
if ($("#"+aFieldName).val()=="") {
failField(aFieldName,"Correo electrónico es obligatorio.");
error();                                 
bool = false;                        
} else {
    var valor = document.getElementById("correo").value;
    if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($("#"+aFieldName).val()))
 
{
    failField(aFieldName,"Introduzca un correo electrónico válido.");
    bool = false;   
}else{
passField(aFieldName);
}
}                        
break;
case "mensaje":                        
if ($("#"+aFieldName).val()=="") {                                
failField(aFieldName,"Mensaje es obligatorio.");
error();
bool = false;                        
} else {                                
passField(aFieldName);                        
}                        
break;
}        
return bool;
}
 

Luego haces estas funciones para imprimir los errores:

Código Javascript:

function failField (aFieldName,msg) {        
$("#form_alert_"+aFieldName+"_msg").remove();       
$("#"+aFieldName).after(alertMsgHTML(aFieldName,msg));
}
//esta function es para agregar en html el mensaje de error 
function alertMsgHTML (aFieldName, msg) {        
$('<li id="form_alert_'+aFieldName+'_msg"></li>').appendTo('#lista').html(msg);
//return '<div id="form_alert_'+aFieldName+'_msg" class="error">'+msg+'</div>';
}
 

Luego agrega esta funcion para remover las etiqueta de error:

Código Javascript:

function passField (aFieldName) {        
$("#form_alert_"+aFieldName+"_msg").remove();
}
 

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

Código Javascript:

function checkField (aField) {        
return checkFieldTask(aField.name);
}
function checkForm (aForm) {        
var bool = true;        
for (var i=0; i < aForm.elements.length; i++) {                
if(!checkFieldTask(aForm.elements[i].name)) {                        
bool = false;                
}        
}        
if (bool) {                               
// si bool es true envio el formulario
document.f.submit();
$('#subbtn').css("display","block");
$('#subbtn').attr("disabled","disabled");
$('#t').html("Enviando...");
} else {
// si bool el false                
failField("subbtn","Por favor resuelva este error antes de continuar.");
}
return bool;
}
 

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