Javascript-форум - Валидация формы

Здравствуйте, собственно сам код:

<html>

<head>
<style type="text/css">
.mono {
    border: 1px solid #666666;
    font-family: Courier,monospace,Arial,Helvetica,Sans-Serif;
    font-size: 15px;
}
.monoerror {
    border: 1px solid #FF0000;
    font-family: Courier,monospace,Arial,Helvetica,Sans-Serif;
    font-size: 15px;
}
.numb_error {
	display: none;
	color: red;
}
.log_error {
	display: none;
	color: red;
}
</style>
</head>

<body>
<form name="forma1" id="forma1" action="javascript:alert('ok');" method="post">
<div id="numb_error" class="numb_error">Error Numb</div>
<input class="mono" type="text" maxlength="6" size="6" id="numb" name="numb">
<br>
<div id="log_error" class="log_error">Error Log</div>
<input class="mono" type="text" maxlength="6" size="6" id="log" name="log">
<br>
</form>
<input type="submit" value="click" onclick="goForm()">

<script type="text/javascript">
function goForm() {
var forma1 = document.getElementById('forma1');
var numb_error = document.getElementById('numb_error');
var numb = document.getElementById('numb');
var log_error = document.getElementById('log_error');
var log = document.getElementById('log');

if (numb.value == ""){
numb_error.style.display = "block";
numb.className = "monoerror";
return;
}
if (log.value == ""){
numb_error.style.display = "none";
numb.className = "mono";

log_error.style.display = "block";
log.className = "monoerror";
return;
}

log_error.style.display = "none";
log.className = "mono";
forma1.submit();
}
</script>
</body>

</html>

Подскажите пожалуйста как сделать чтоб при клике на незаполненный input class его менялся ?

т.е. юзер заполнил поля не верно, вылетело предупреждение с ошибкой и поле выделилось красным цветом, юзер кликает на это поле чтоб заполнить верно и предупреждение убирается и class поля меняется.
Подскажите плиз, не могу сообразить.

<html> <head> <style type="text/css"> .mono { border: 1px solid #666666; font-family: Courier,monospace,Arial,Helvetica,Sans-Serif; font-size: 15px; } .monoerror { border: 1px solid #FF0000; font-family: Courier,monospace,Arial,Helvetica,Sans-Serif; font-size: 15px; } .numb_error { display: none; color: red; } .log_error { display: none; color: red; } </style> </head> <body> <form name="forma1" id="forma1" action="javascript:alert('ok');" method="post"> <div id="numb_error" class="numb_error">Error Numb</div> <input class="mono" type="text" maxlength="6" size="6" id="numb" name="numb"> <br> <div id="log_error" class="log_error">Error Log</div> <input class="mono" type="text" maxlength="6" size="6" id="log" name="log"> <br> </form> <input type="submit" value="click" onclick="goForm()"> <script type="text/javascript"> function goForm() { var forma1 = document.getElementById('forma1'); var numb_error = document.getElementById('numb_error'); var numb = document.getElementById('numb'); var log_error = document.getElementById('log_error'); var log = document.getElementById('log'); if (numb.value == ""){ numb_error.style.display = "block"; numb.className = "monoerror"; numb.onclick = function(){this.className="mono";numb_error.style.display = "none";this.onclick=null} return; } if (log.value == ""){ numb_error.style.display = "none"; numb.className = "mono"; log.onclick = function(){this.className="mono";log_error.style.display = "none";this.onclick=null} log_error.style.display = "block"; log.className = "monoerror"; return; } log_error.style.display = "none"; log.className = "mono"; forma1.submit(); } </script> </body> </html>