Messaggio anzichè alert

[cocalito]

Ho questo codice per la validazione di un form:

<script language="javascript">
function Controlla(ff){
  var msg='';
  if(ff.NomeCampo1.value=='')msg+='Inserire Campo1\n';
  if(ff.NomeCampo2.value=='')msg+='Inserire Campo2\n';
  if(ff.NomeCampo3.value=='')msg+='Inserire Campo3\n';
  if(msg!=''){
    alert('ATTENZIONE!\n'+msg);
    return false
  }
  else return true
}
</script>
<form onsubmit="return Controlla(this)">
  <input type="text" name="NomeCampo1">

  <input type="text" name="NomeCampo2">

  <input type="text" name="NomeCampo3">

  <input type="submit" value="submit">
</form>

Come posso fare per far apparire il messaggio, nel caso che un campo rimanga vuoto, anzichè in un alert in un punto qualsiasi all'interno della pagina?

Avevo pensato ad un <div> con proprietà "visibility" inizialmente hidden che cambia poi in visible, ma non so come fare.

Magari però c'è un metodo più semplice

[cocalito]

up

[Mich_]

L'idea del <div> va bene, ma io userei la proprieta` CSS display (da cambiare tra 'none' e 'block').
Deve anche avere position absolute e devi definire left e top.

function mostra(messaggio, x, y) {
  var ogg = document.getElementById('ID_OGGETTO');
  ogg.top = y+'px';
  ogg.left = x+'px';
  if(messaggio.length) {
    ogg.innerHTML = '

'+messaggio+'</p>';
    ogg.style.display = 'block';
  } else {
    ogg.style.display = 'none';
  }
}

da richiamare con:
mostra('quello che vuoi', posizioneX, posizioneY); // per viusalizzare;
mostra('', 0, 0); // per nascondere

Nel documento dovrai avere un:
<div id="ID_OGGETTO">&amp;nbsp;</div>

e nel CSS ci dovra` essere:

#ID_OGGETTO {
  position: absolute;
  width: 40em;
  height: 10em;
  /* eventuale bordo */
}

posizioneX e posizioneY devono essere due valori numerici e devono dare la posizione in px (con modifiche puoi anche dare la posizione in em o altre unita`).