As you know PF v7 includes jQuery framework. Currently there's no part of PF v7 where it is used. There was no time and good ideas how to use it. Below an example how to implement some jQuery code and don't modify PF v7 core.
1) easy way to validate INPUT, SELECT, TEXTAREA fields (based on edit_profile.php file):
- lets make new panel and paste code below, then save and enable new panel, go to edit profile and try password fields:
?>
<script type='text/javascript'>
$(function(){
$("input").blur(function(){
alert($(this).val());
});
});
</script>
<?php
On every field focus lost you should receive a message with current field entry. Nothing sepcial. But lets modify a code a little bit:
?>
<script type='text/javascript'>
$(function(){
$("input[@type=password]").blur(function(){
$("#"+$(this).attr("name")+"_validate").remove();
if ($(this).val().length>0 && ($(this).val().length<6 || $(this).val().length>20)) {
$(this).after("<div style='' id='"+$(this).attr("name")+"_validate'>Password should contain between 6 and 20 letters...</div>");
}
});
});
</script>
<?php
In this case our validation procedure checks password length of each input field of password type if there's any entry.
IMPORTANT! From jQuery v1.3.x selectors of attributes does not contain @ sign! So if you're already upgraded your jQuery remember to remove @ sign from above code.
In this way we can validate any of input, select or textarea fields. But we still need some code to stop post procedure for profile form. Below code hoe to avoid post procedure if any errors ocuurs in profile fields:
?>
<script type='text/javascript'>
var profile_errors = 0;
$(function(){
$("input[@type=password]").blur(function(){
profile_errors = 0;
$("#"+$(this).attr("name")+"_validate").remove();
if ($(this).val().length>0 && ($(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 letters...</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 code we're checking password fields for any length errors. If they occurs wh're binding click fonction on submit button and displaying a message.
Of course this method is unobstructive for users with no JS enabled. In this case old submit and verify method of user profile will be used.
on Oct 17 2009 at 22:31:12
on Oct 18 2009 at 14:05:32
on Oct 23 2009 at 12:20:47