In previous part we're checked that PF password length is valid. Let make this checking more accurate - password strength. We need new function called getPasswordStrength() (I foud this somewhere in net ;), which returns integer value between 0 and 100. In this example strong password should return >= 70 points
?>
<script type='text/javascript'>
function getPasswordStrength(H){
var D=(H.length);
if (D<4) { D=0 }
if(D>5){D=5}
var F=H.replace(/[0-9]/g,"");
var G=(H.length-F.length);
if(G>3){G=3}
var A=H.replace(/\W/g,"");
var C=(H.length-A.length);
if(C>3){C=3}
var B=H.replace(/[A-Z]/g,"");
var I=(H.length-B.length);
if(I>3){I=3}
var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
if(E<0){E=0}
if(E>100){E=100}
return E
}
var profile_errors = 0;
$(function(){
$("input[@type=password]").blur(function(){
profile_errors = 0;
$("#"+$(this).attr("name")+"_validate").remove();
if ($(this).val().length>0) {
if ($(this).val().length<6 || $(this).val().length>20) {
$(this).after("<div style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Password should contain between 6 and 20 chars...</div>");
profile_errors++;
} else if (getPasswordStrength($(this).val())<70) {
$(this).after("<div style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Your password isn't enough strong. Strong password should contain lower and upper case chars, numbers and special signs...</div>");
profile_errors++;
}
}
});
$("input[@name=update_profile]").bind("click", function(){
if (profile_errors>0) {
alert("Some of user fields contain errors\nPlease verify your data before update your profile.");
return false;
}
});
});
</script>
<?php
In above example for each INPUT fields of PASSWORD type we were checked length and password strength. If any field does not match those rules we're inform user about that.
Password things is now out of our minds ;) Now let validate email address. We need another function called isValidEmailAddress() (also found somewhere in net ;). At this moment we also need to change philosophy of errors checking, because we need to check also other fields than PASSWORD. jQuery selectors helps us again. Every DIV with error will contain profile_errors CSS class. Before profile update we will check the number of profile_errors class at page. If profile_errors class count will be different than 0 then we will display alert message about:
?>
<script type='text/javascript'>
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
function getPasswordStrength(H){
var D=(H.length);
if (D<4) { D=0 }
if(D>5){D=5}
var F=H.replace(/[0-9]/g,"");
var G=(H.length-F.length);
if(G>3){G=3}
var A=H.replace(/\W/g,"");
var C=(H.length-A.length);
if(C>3){C=3}
var B=H.replace(/[A-Z]/g,"");
var I=(H.length-B.length);
if(I>3){I=3}
var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
if(E<0){E=0}
if(E>100){E=100}
return E
}
$(function(){
$("input[@type=password]").blur(function(){
$("#"+$(this).attr("name")+"_validate").remove();
if ($(this).val().length>0) {
if ($(this).val().length<6 || $(this).val().length>20) {
$(this).after("<div class='profile_errors' style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Password should contain between 6 and 20 chars...</div>");
} else if (getPasswordStrength($(this).val())<70) {
$(this).after("<div class='profile_errors' style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Your password isn't enough strong. Strong password should contain lower and upper case chars, numbers and special signs...</div>");
}
}
});
$("input[@name=user_email]").blur(function(){
$("#"+$(this).attr("name")+"_validate").remove();
if (!isValidEmailAddress($(this).val())) {
$(this).after("<div class='profile_errors' style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Entered email address looks as invalid...</div>");
}
});
$("input[@name=update_profile]").bind("click", function(){
if ($(".profile_errors").size()>0) {
alert("Some of user fields contain errors\nPlease verify your data before update your profile.");
return false;
}
});
});
</script>
<?php
Now we have compete user profile validator which chcecks main user fields of PF v7. Of course you can validate other fields but I leave it for you :)
In next article how to force JS enabled in browser...
PS1: please remember about jQuery 1.2.x and 1.3.x differences of attribute selectors!
PS2: thanks to Pieka from Polish PF Support for formatting this article!
