Pues este código está funcionando perfectamente. El único detalle es que el JS está antes de el div y no va a encontrar el elemento de esa manera. Lo único que tenés que hacer es ponerlo por debajo y funciona sin problemas. Yo misma lo probé:
Código HTML:
<div id="div_capa">
</div>
<div id="div_form">
<form id="formulario">
<div id="div_datos_personales">
<fieldset>
<legend>Datos personales</legend>
<div id="div_dni">
<label id="label_dni" for="dni">D.N.I.:</label>
<input id="dni" name="dni" type="text" maxlength="8"/>-
<input id="letra" name="letra" type="text" maxlength="1"/>
</div>
<div id="div_nombre">
<label id="label_nombre" for="nombre">Nombre:</label>
<input id="nombre" name="nombre" type="text"/>
</div>
<div id="div_apellidos">
<label id="label_apellidos" for="apellidos">Apellidos:</label>
<input id="apellidos" name="apellidos" type="text"/>
</div>
</fieldset>
</div>
<div id="div_submit">
<input id="submit" type="submit" value="Enviar">
</div>
</form>
</div>
<script type="text/javascript">
document.getElementById('formulario').onsubmit = function()
{
var DNI='';
var NOMBRE='';
var APELLIDOS='';
if (document.getElementById("dni").value == '')
{
DNI = ("El campo DNI no puede ser vacio");
}
if (document.getElementById("nombre").value == '')
{
NOMBRE = ("El campo nombre no puede ser vacio");
}
if (document.getElementById("apellidos").value == '')
{
APELLIDOS = ("El campo apellidos no puede ser vacio");
}
if(document.getElementById("dni").value != '' && document.getElementById("nombre").value != '' &&
document.getElementById("apellidos").value != '' ) {
return true;
}
else{
alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);
var capa = document.getElementById('div_capa');
capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
capa.style.border = '1px solid red';
return false;
}
}
</script> Una cosa más, metí el alert y todo eso dentro de la salida de error del if. Sino te generaba un alert en blanco cuando estaban los campos completos.
Saludos