Could someone please tell me why this doesn't work before I pull my hair out? I am trying to validate a simple form with JavaScript and I want to check if the form fields are null but can't get it to work if they are. If I change the statement to != and put something in the form field, it will prompt the alert. Shouldn't it work the same way if it is null? I even tried equal to an empty string (=== "") and that didn't work either.

Oh. I would rather use innerHTML instead of an alert box for the error message. Is there a way to get the innerHTML to stay on the page. I realize that when the submit button is clicked, the page reloads and that is why it goes away, but is there a way to stop it from reloading?

Thanks to anyone taking a look!

Code:
function validate(){
			
	var usrName = document.getElementById('rUsrName');
	var pwd = document.getElementById('rPasswd');
	var pwdCf = document.getElementById('rPasswdCfm');
				
	if(usrName === null){
		alert('Please fill in each field');
		//document.getElementById('errMsg').innerHTML = "Please enter each field";
       }
				
				
}//end validate
Just in case a look at the form is needed.
Code:
<form method='post'> 
	<fieldset>
	<legend>Register</legend>	
			
		<label for='rUsrName'>User Name:</label>
		<input id='rUsrName' name='rUsrName' type='text'>

		<label for='rPasswd'>Password:</label>
		<input id='rPasswd' name='rPasswd' type='password'>
					
		<label for='rPasswdCfm'>Pwd Confirm:</label>
		<input id='rPasswdCfm' name='rPasswdCfm' type='password'>
					
		<input onclick='validate();' type='submit' value='Register'>
											
		<h4 id='errMsg'>&nbsp;</h4>
	/fieldset>
</form>