Get started with PHP-Fusion

jQuery & PF v7 - how to... part 1

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.
Posted by Wooya on October 17 2009 20:33:32
3 Comments · 21041 Reads · Print
Comments
#1 | HobbyMan on Oct 17 2009 at 23:31:12
Nice Smile
Can we have part 2 please?
#2 | Craig on Oct 18 2009 at 15:05:32
Very good guide.Grin
#3 | Wooya on Oct 23 2009 at 13:20:47
Sorry for formatting errors. This article must be reedited
Post Comment
Please Login to Post a Comment.
Ratings
Rating is available to Members only.

Please login or register to vote.

Awesome! Awesome! 100% [3 Votes]
Very Good Very Good 0% [No Votes]
Good Good 0% [No Votes]
Average Average 0% [No Votes]
Poor Poor 0% [No Votes]