User Create/Edit: More advanced password match/mismatch notifications.

core/users/signup.php

@@ -203,13 +203,29 @@ if (count($_POST)>0 && check_str($_POST["persistform"]) != "1") {
 //show the content
 	echo "<script>";
 	echo "	function compare_passwords() {";
-	echo "		if (document.getElementById('password').value != document.getElementById('confirmpassword').value) {";
-	echo "			$('#password').addClass('formfld_highlight');";
-	echo "			$('#confirmpassword').addClass('formfld_highlight');";
+	echo "		if (document.getElementById('password') === document.activeElement || document.getElementById('confirmpassword') === document.activeElement) {";
+	echo "			if (document.getElementById('password').value != '' || document.getElementById('confirmpassword').value != '') {";
+	echo "				if (document.getElementById('password').value != document.getElementById('confirmpassword').value) {";
+	echo "					$('#password').removeClass('formfld_highlight_good');";
+	echo "					$('#confirmpassword').removeClass('formfld_highlight_good');";
+	echo "					$('#password').addClass('formfld_highlight_bad');";
+	echo "					$('#confirmpassword').addClass('formfld_highlight_bad');";
+	echo "				}";
+	echo "				else {";
+	echo "					$('#password').removeClass('formfld_highlight_bad');";
+	echo "					$('#confirmpassword').removeClass('formfld_highlight_bad');";
+	echo "					$('#password').addClass('formfld_highlight_good');";
+	echo "					$('#confirmpassword').addClass('formfld_highlight_good');";
+	echo "				}";
+	echo "			}";
 	echo "		}";
 	echo "		else {";
-	echo "			$('#password').removeClass('formfld_highlight');";
-	echo "			$('#confirmpassword').removeClass('formfld_highlight');";
+	echo "			if (document.getElementById('password').value == document.getElementById('confirmpassword').value) {";
+	echo "				$('#password').removeClass('formfld_highlight_bad');";
+	echo "				$('#confirmpassword').removeClass('formfld_highlight_bad');";
+	echo "				$('#password').removeClass('formfld_highlight_good');";
+	echo "				$('#confirmpassword').removeClass('formfld_highlight_good');";
+	echo "			}";
 	echo "		}";
 	echo "	}";
 	echo "</script>";
@@ -241,11 +257,11 @@ if (count($_POST)>0 && check_str($_POST["persistform"]) != "1") {
 
 	echo "	<tr>";
 	echo "		<td class='vncellreq'>".$text['label-password'].":</td>";
-	echo "		<td class='vtable'><input type='password' class='formfld' autocomplete='off' name='password' id='password' value='$password' onblur='compare_passwords();'></td>";
+	echo "		<td class='vtable'><input type='password' class='formfld' autocomplete='off' name='password' id='password' value='$password' onfocus='compare_passwords();' onkeyup='compare_passwords();' onblur='compare_passwords();'></td>";
 	echo "	</tr>";
 	echo "	<tr>";
 	echo "		<td class='vncellreq'>".$text['label-confirm_password'].":</td>";
-	echo "		<td class='vtable'><input type='password' class='formfld' autocomplete='off' name='confirmpassword' id='confirmpassword' value='$confirmpassword' onblur='compare_passwords();'></td>";
+	echo "		<td class='vtable'><input type='password' class='formfld' autocomplete='off' name='confirmpassword' id='confirmpassword' value='$confirmpassword' onfocus='compare_passwords();' onkeyup='compare_passwords();' onblur='compare_passwords();'></td>";
 	echo "	</tr>";
 	echo "	<tr>";
 	echo "		<td class='vncellreq'>".$text['label-email'].":</td>";

core/users/usersupdate.php

@@ -376,13 +376,29 @@ else {
 
 	echo "<script>";
 	echo "	function compare_passwords() {";
-	echo "		if (document.getElementById('password').value != document.getElementById('confirmpassword').value) {";
-	echo "			$('#password').addClass('formfld_highlight');";
-	echo "			$('#confirmpassword').addClass('formfld_highlight');";
+	echo "		if (document.getElementById('password') === document.activeElement || document.getElementById('confirmpassword') === document.activeElement) {";
+	echo "			if (document.getElementById('password').value != '' || document.getElementById('confirmpassword').value != '') {";
+	echo "				if (document.getElementById('password').value != document.getElementById('confirmpassword').value) {";
+	echo "					$('#password').removeClass('formfld_highlight_good');";
+	echo "					$('#confirmpassword').removeClass('formfld_highlight_good');";
+	echo "					$('#password').addClass('formfld_highlight_bad');";
+	echo "					$('#confirmpassword').addClass('formfld_highlight_bad');";
+	echo "				}";
+	echo "				else {";
+	echo "					$('#password').removeClass('formfld_highlight_bad');";
+	echo "					$('#confirmpassword').removeClass('formfld_highlight_bad');";
+	echo "					$('#password').addClass('formfld_highlight_good');";
+	echo "					$('#confirmpassword').addClass('formfld_highlight_good');";
+	echo "				}";
+	echo "			}";
 	echo "		}";
 	echo "		else {";
-	echo "			$('#password').removeClass('formfld_highlight');";
-	echo "			$('#confirmpassword').removeClass('formfld_highlight');";
+	echo "			if (document.getElementById('password').value == document.getElementById('confirmpassword').value) {";
+	echo "				$('#password').removeClass('formfld_highlight_bad');";
+	echo "				$('#confirmpassword').removeClass('formfld_highlight_bad');";
+	echo "				$('#password').removeClass('formfld_highlight_good');";
+	echo "				$('#confirmpassword').removeClass('formfld_highlight_good');";
+	echo "			}";
 	echo "		}";
 	echo "	}";
 	echo "</script>";
@@ -429,11 +445,11 @@ else {
 
 	echo "	<tr>";
 	echo "		<td class='vncell'>".$text['label-password'].":</td>";
-	echo "		<td class='vtable'><input type='password' autocomplete='off' class='formfld' name='password' id='password' value='' onblur='compare_passwords();'></td>";
+	echo "		<td class='vtable'><input type='password' autocomplete='off' class='formfld' name='password' id='password' value='' onfocus='compare_passwords();' onkeyup='compare_passwords();' onblur='compare_passwords();'></td>";
 	echo "	</tr>";
 	echo "	<tr>";
 	echo "		<td class='vncell'>".$text['label-confirm_password'].":</td>";
-	echo "		<td class='vtable'><input type='password' autocomplete='off' class='formfld' name='confirm_password' id='confirmpassword' value='' onblur='compare_passwords();'></td>";
+	echo "		<td class='vtable'><input type='password' autocomplete='off' class='formfld' name='confirm_password' id='confirmpassword' value='' onfocus='compare_passwords();' onkeyup='compare_passwords();' onblur='compare_passwords();'></td>";
 	echo "	</tr>";
 
 	echo "	<tr>";

themes/enhanced/template.php

@@ -204,13 +204,20 @@ select.formfld {
 	padding: 4px;
 	}
 
-.formfld_highlight {
+.formfld_highlight_bad {
 	border-color: #aa2525;
 	-webkit-box-shadow: 0px 0px 3px #aa2525 inset;
 	-moz-box-shadow: 0px 0px 3px #aa2525 inset;
 	box-shadow: 0px 0px 3px #aa2525 inset;
 	}
 
+.formfld_highlight_good {
+	border-color: #2fb22f;
+	-webkit-box-shadow: 0px 0px 3px #2fb22f inset;
+	-moz-box-shadow: 0px 0px 3px #2fb22f inset;
+	box-shadow: 0px 0px 3px #2fb22f inset;
+	}
+
 input.txt {
 	width: 98.75%;
 	}