Add Alert Message to Form Submit?

[thisdesignup]

So I have this code that I found online that checks if all form elements are filled and only allows the form to be submitted if they are filled. I was thinking I could edit this code to have an alert pop up that would say if the form has been submitted or an alert if the form has not been submitted but I was not able to get it working. Is there anyone here that could help me?

<script type="text/javascript">

(function() {
var divs = document.getElementById('ss-form').
getElementsByTagName('div');
var numDivs = divs.length;
for (var j = 0; j < numDivs; j++) {
if (divs[j].className == 'errorbox-bad') {
divs[j].lastChild.firstChild.lastChild.focus();
return;
}
}
for (var i = 0; i < numDivs; i++) {
var div = divs[i];
if (div.className == 'ss-form-entry' &&
div.firstChild &&
div.firstChild.className == 'ss-q-title') {
div.lastChild.focus();
return;
}
}
})();
</script>

I am also not sure if that would be the best way to do it. Preferable I would like to have a red asterisk show up next to the empty fields and have an alert message tell them to look for the red aterick but I don't know enough java script to figure that out.

Is there a way that I could have the javascript check each form element and if it is empty have it show asterick?

[Old Pedant]

Ummm...alerts are considered obsolete and bad form and shouldn't be used except maybe for debugging.

Reason: Some browsers no allow users to turn them off. And almost surely all browsers will soon follow suit.

[thisdesignup]

So then how might you suggest I go about it? Is it bad to make a fake alert using javascript and css?

[Old Pedant]

Nope, That would be the right way to do it.

A "popon" <div>, say. That is, a <div> with a z-index higher than the rest of the page but with display: none; in its style. You just put your message inside that div, change the style.display to "block", and there it is. Maybe allow the user to click anywhere in the <div> to change the style.display back to "none".