Ciao,
questa è solo un'idea e probabilmente c'è qualche errore perché non ho potuto lavorarci con cura ma forse può darti qualche spunto:
codice:
<html>
<head>
<style>
.errore {
position: relative;
top: 100px;
border: 2px solid red;
background: yellow;
text-align: center;
width: 300px;
display: none;
}
</style>
<script type="text/javascript">
function controllo() {
document.getElementById('errore').innerHTML = "";
document.getElementById('errore').style.display = "none";
document.getElementById('errore').style.left = Math.floor((screen.width-300)/2);
if (document.getElementById('inp1').value == "") {
document.getElementById('errore').style.display = "block";
document.getElementById('errore').innerHTML += "Campo 1 non valorizzato
";
}
if (document.getElementById('inp2').value == "") {
document.getElementById('errore').style.display = "block";
document.getElementById('errore').innerHTML += "Campo 2 non valorizzato";
}
if (document.getElementById('errore').innerHTML != "") {
document.getElementById('errore').innerHTML += "
<input type=\"button\" value=\"OK\" onclick=\"document.getElementById('errore').style.display = 'none'\">";
}
}
</script>
</head>
<body>
<input type="text" id="inp1">
<input type="text" id="inp2">
<input type="button" onclick="controllo()">
<div id="errore" class="errore"></div>
</body>
</html>