Form validation with onblur - forms

Question

Here is my form.
<form method="post" name="frm">
<label>Name*<input type="text" name="Name" value="<?php echo $r['Name'] ?>" onblur="if(this.value.length<3) alert('Name too short');" /></label>
<label>Username*<input type="text" name="UN" value="<?php echo $r['UN'] ?>" onblur="if(this.value.length<5) alert('Username too short');" /></label>
<label>Password*<input type="password" name="PW" onblur="validation()" /></label>
<label>Confirm Password*<input type="password" name="CM" onblur="validation()" /></label>
<?php } ?>
<input type="submit" name="Submit" value="<?php if($new) echo 'Register'; else echo 'Update'; ?>" />
</form>
Without writing separate onBlur events I am trying to get all these events into a function called validation() as I have done for password and confirm-password fields. Here is my validation function:
<script language="javascript">
function validation() {
var password = document.frm.PW.value;
var password2 = document.frm.CM.value;
if (password.length < 5) {
alert ("Password too short");
}
else if (password != password2) {
alert("password mismatch");
}
}
</script>
But with this code once I have filled password, and when I am about to start inputting for confirm-password field, it alerts the message "password mismatch". How to get rid of this? And for all the form tags if I am validating and using validation() function, then in each tag do I have to call onblur=validation()?

Answer 1

Don't have the password validation fired on the main password change - have it fired when you alter password2 or when you click submit. :)
If you insist on checking when you update password AND password 2, I would just add a check to see if password2 had been left blank:
else if(password !== password2 && password2 !== ""){
But doing ALL your checks on submit is a much cleaner solution (and as Rake says, it would be neater still to have a span that is updated instead of an alert).