mootools image gallery with XML parser

Tired of adding images by hand to your gallery? On the lookout for a pretty nice, handy and cool image gallery? Here you go. Check out this:

AJAX/PHP input field validation

Commonly, most input field validation via javascript can be circumvented easily, therefore checking input fields with PHP is much more secure. Unfortunately users normally have to submit the page, wait while it loads and then see the results popping up.

This can fast get on someones nerves - especially with i.e. telephone numbers that require a certain format or fields that only allow a certain range of characters. Here we will show you how to add some flexibility to your input fields. Please note, we will only show the check for one input field, but this should be enough for you to get the clue.

First of all, the javascript mootools framework: ( put it into your page header ):


<script src="js/mootools.js" language="javascript" type="text/javascript"></script>


some CSS for our input boxes, labels and the div that will be updated with the result:

input {
border: 1px solid #CCCCCC;
float: right;
width: 200px;
clear: right;
}
textarea {
height: 80px;
width: 200px;
margin-bottom: 20px;
font: 11px "Lucida Grande", Arial, Helvetica, sans-serif;
}

label {
float: left;
clear: left;
line-height: 21px;
width: 200px;
}
#nameOK{
width:20px;
float:left;
}

Now lets add a form and the appropriate label and returning div to it.

<form id="form2" name="form2" method="post" action="checkAll.php" >
<label for="textfield">Name</label>
<div id="nameOK" style="width:20px;float:left"></div>
</form>


Now we need to add the javascript function that calls the check and returns what is okay and what not. Please note, you’ll need mootools v0.83 or higher to use this feature. Furthermore you need these two images: ( or create yourself some )


<javascript type="text/javascript" language="javascript">
function checkName(){
var name = $('name').value;
var x = new Ajax('checkName.php?id=name', {method:'get',update:'nameOK' }).request();
return false;
}
</script>


This piece of code will send the request to the file checkName.php and attach the value of the input field as parameter. The update section of the AJAX call makes sure, the result of the check will be placed into the appropriate div. Furthermore the return false will block the php file from loading and presenting itself.

So this is how we made the check for a valid username in the checkName.php:


$y = htmlentities(strip_tags($_GET['name']));
if(empty($y){
echo"Sorry but you left the name field blank. Please correct it.";
return false;
}
$x = preg_replace('/[^a-zA-Z\s]/i','',$y);
if($x){
echo"<img src=\"images/error.jpg\" alt=\"Error - your name contains illegal characters.\" />";
return false;
}else{
echo"<img src=\"images/okay.jpg\" alt=\"Ok. Your username seems to be fine.\" />
?>

So what is this all about? Lets begin decrypting the php code:

first of all, using htmlentities ( please, only use this on apache versions greater/equal than 4.4.5 as prior versions have a bug that could result in arbitrary code execution ) and the strip_tags functions will prevent users from supplying malicious code that could be used for XSS attacks.

Then a simple check is done if the field is filled anyway. If not, we send back the error image.
After that, we do a regex to see whether the field only contains letters and store the result in $x. If $x contains anything, we know not only letters have been used ( the $x value could be used to send back which letters are not allowed as it only contains the erraneous ones ).

If $x is empty, the name entered was okay. So we send back the okay image, which is displayed in the div we supplied in the javascript call. From here on you might wish to save the result(s) of the check in a cookie. In a real life situation you’ll have more fields which can be saved to cookies then and checked as soon as the user pushes the submit button.

View a sample how it works here: contact form

Filed Under AJAX, Programming · Leave a Comment  

Welcome to the artViper designstudio blog

March 1, 2007

Welcome to our design & programming blog. Here we will post new “inventions” and code snippets for daily use on your site. Using PHP & AJAX to create convenient pages will help you keep your visitors online.

You might wish to see our other pages too for getting some inspiration about features and designs. Have a look at www.artviper.com www.artviper.eu www.artviper.org or for german visitors www.artviper.de and of course www.artviper.com

Filed Under common · Leave a Comment