Web International Awards

payday loan

23

MAR 2010 15

Impressive web forms. From coding to validation!

Screenshot of WebRaptor's request quote form

Preview of the tutorial

Quite some time ago I have published the first part of this series. Today I'll tackle coding a good webform, styling it, client-side and server-side validating. The first part of the tutorial was extremely popular, and that's why I chose to merge parts two and three, which anyway are closely related.

PS: You'll need some patience digesting this tutorial as it turned out to be really complex.

The code I am about to present here is the one that has been used in our contact and request quote forms from our newly released web development website, just as the jQuery slider tutorial published a few weeks ago was used in our portfolio section.

Getting dirty with xhtml

I am not going to code all different label positioning options presented in the first article (inline, left-aligned, right-aligned, top-aligned). The one I chose for our website and will be showcased over here is the one with top-aligned labels.

I chose top-aligned labels because the page layout where the form is implemented doesn't allow a lot of horizontal space. The bonus was that potential clients could process it fast. Being a form with just a couple of fields, the vertical space required by the form is decent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form action="contact-us-process.php" method="post" accept-charset="utf-8" id="contactform">
	<fieldset>
		<label for="name">Full name : </label>
		<div class="field">
			<input type="text" name="name" value="<?=$name?>" id="name" class="v-required" />
		</div>
		<label for="email">Email : </label>
		<div class="field">
			<input type="test" name="email" value="<?=$email?>" id="email" class="v-required v-email" />
		</div>
		<label for="phone">Phone : </label>
		<div class="field">
			<input type="text" name="phone" value="<?=$phone?>" id="phone" class="v-required v-digits" />
		</div>
		<label for="message">Message : </label>
		<div class="field">
			<textarea name="message" class="v-required"><?=$message?></textarea>
		</div>
		<label for="security">One plus two: </label>
		<div class="field last">
			<input type="text" name="security" value="" id="security" class="v-required v-security"/>
			<small>Sorry, we asked as we do not like spam</small>
		</div>
		<span class="clear">&nsbp;</span>
		<input type="submit" name="submit" value="Send the message" id="submit" class="button all-rounded" />
	</fieldset>
</form>

As you can see, all elements are wrapped inside a singular fieldset, and each input field is wrapped inside a div.field block element. The reason why all input areas are wrapped inside a div is because I wanted to add that nice border to each input element, border which needed to be consistent through input fields, textareas, select elements and more. As you'll see in a couple of minutes, the styling is achieved with just a few bits of CSS.

Close up shot: fancy borders around input fields

You may also ask what's up with the bits of php coding that are embedded in the input elements — the code that's emphasized above. You'll find out soon enough when we reach the final point of this tutorial: server-side validation.

The CSS

Without any CSS the form described above would look terrible, so let's see what we can do to make it shine!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#contactform { display:block; padding:0 0 1em 0; }
#contactform label,
#contactform input,
#contactform select,
#contactform textarea,
#contactform .field	{ display:block; float:left; clear:left; }
#contactform .field	{ padding:0.5em; border-radius:0.4em; -moz-border-radius:0.4em; -webkit-border-radius: 0.4em; 
					 background:rgb(228,228,228); background:rgba(51,51,51,0.1); }
#contactform .field span.error{ display:block; float:right; color:#FF0000; text-indent:0.5em; }
#contactform .field span.ok	{ display:block; float:right; color:#339933; text-indent:0.5em; }
#contactform label { margin-top:2em; }
#contactform input { width:20em; height:2em; line-height:2em; }
#contactform select { width:20.5em; }
#contactform textarea { width:30em; height:8em; line-height:2em; }
#contactform input,
#contactform textarea { color:#333333; line-height:2em; padding-left:0.5em; 
						font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; }
#contactform small { float:left; clear:left; }
#contactform .last { margin-bottom:2em; }

As we have a top-aligned form, all elements should flow beneath the one before it. We do this by floating all of them to the left and clearing the left side (lines 2-6). The field class is applied to divs that wrap all input elements. The one I said will be used to add a nice consistent border to input elements throughout the webform.

On line 7 we add padding to the field element, round the corners (if browsers support it), then set a transparent background, with fallback for browsers which do not support RGBA. I have used background instead of background-color because the later won't make the fallback RGB work.

The two span elements styled on lines 9 and 10 will be used for inline validation. Error messages will have the error class while confirmation messages will have the ok class. We need some space between different label & input groups in the form, that's why there's a top margin for each label.

On lines 12 to 14 we set the widths and heights of the input elements, while on lines 15 and 16 we style the appearance of basic input fields and textareas. The font-family is inserted here because textareas seem to have a mind of their own, and using em sizing will trigger unexpected results because of the font used. Choose a font that's different than your body's font and the textarea, though having the same specified size as a regular input field, will not have the same width as an input field.

Done styling. Let's validate data!

There's two ways we can validate data on a webform. One is by using client-side technologies, mainly JavaScript, and the other by using server-side technologies, be it PHP, ASP, Ruby or anything else you're using for your project. If you were thinking not to validate on the server-side if you have client-side validation, think again, because people could have javascript turned off and send malicious data to your server and databases.

This is why server-side validation is mandatory and client-side validation is optional, but can be used to really enhance the experience of your website's visitors.

Client side validation

In order to know how to validate each field in our form, we need to add specific classes to each one. v-required stands for a required field, v-digits is used for fields that should accept only digits while v-email is used for fields that expect and email address.

1
2
3
<input type="text" name="name" value="<?=$name?>" id="name" class="v-required" />
<input type="test" name="email" value="<?=$email?>" id="email" class="v-required v-email" />
<input type="text" name="phone" value="<?=$phone?>" id="phone" class="v-required v-digits" />

As you can see, our input fields have different classes assigned for our javascript to know how to validate. We've also assigned a unique ID to our form to be able to use it within our javascript. The validation script will have two main functionalities, one which will validate data on the fly (while the user is typing it and moving from a field to the next one), and one that will validate data when the submit button is pressed.

I am also using a dirty little trick. The validation will look inside the form for error classes. That's why on page load I am going to add an error class to each field that's required. When the user will type inside the field, the error class will be removed. When there's no error classes, data is valid and we can send it to our server for processing.

1
$('#contactform input.v-required,#contactform textarea.v-required').attr('rel','error');

Select elements have a value assigned by default, so they don't need specific validation.

On the fly client-side validation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
$('#contactform input:not(.button), #contactform textarea, #contactform select').focusout(function(){
error = 0;
inputText = '';
inputText = $(this).val(); // this works for inputs
if(inputText.length==0) inputText = $(this).text(); // this works for textareas
 
classes = $(this).attr('class');
classesArray = classes.split(' ');
$.each(classesArray, function(index, value){
	if((value=='v-required')&&(inputText.length==0)&&(error==0))
	{// required field empty
		error = 1;
	}
	if((value=='v-digits')&&(testDigits(inputText)==false)&&(error==0))
	{ // field needs to be digits only
		error = 2;
	}
	if((value=='v-email')&&(testEmail(inputText)==false)&&(error==0))
	{ // field needs to be email format
		error = 3;
	}
	if((value=='v-url')&&(testURL(inputText)==false)&&(error==0))
	{ // field needs to be URL format
		error = 4;
	}
	if((value=='v-security')&&(testSecurity(inputText)==false)&&(error==0))
	{ // field needs to be URL format
		error = 5;
	}
});
 
if(error>0)
{// there's some errors
	if(error==1) 
	{ 
		$(this).next('span.error').remove();?$(this).next('span.ok').remove();
		$('<span class="error">This is a required field</span>').insertAfter($(this));
		$(this).attr('rel','error');
	}
	else if(error==2) 
	{ 
		$(this).next('span.error').remove();?$(this).next('span.ok').remove();
		$('<span class="error">Digits only please</span>').insertAfter($(this));
		$(this).attr('rel','error');
	}
	else if(error==3) 
	{ 
		$(this).next('span.error').remove();?$(this).next('span.ok').remove();
		$('<span class="error">Invalid email</span>').insertAfter($(this));
		$(this).attr('rel','error');
	}
	else if(error==4) 
	{ 
		$(this).next('span.error').remove();?$(this).next('span.ok').remove();
		$('<span class="error">Invalid URL</span>').insertAfter($(this));
		$(this).attr('rel','error');
	}
	else if(error==5) 
	{ 
		$(this).next('span.error').remove();?$(this).next('span.ok').remove();
		$('<span class="error">Incorrect answer</span>').insertAfter($(this));
		$(this).attr('rel','error');
	}
	else
	{ 
		$(this).next('span.error').remove();?$(this).next('span.ok').remove();
		$('<span class="error">Unknown error</span>').insertAfter($(this));
		$(this).attr('rel','error');
	}
}
else
{
	$(this).next('span.error').remove();
	$(this).next('span.ok').remove();
	$('<span class="ok">Ok</span>').insertAfter($(this));
	$(this).removeAttr('rel');
}
});

On the first line of the above code we identify all input elements in the form. The form has an submit button and we need to exclude it. Also, we're going to apply a certain behavior to the selected elements when the user focuses out of them.

On the second line we initialize a variable which we're going to use to track errors. 1 for required, 2 for digits and so on. On lines 3 to 5 we get the contents the user typed inside the element. As we won't know at runtime which type of element we are dealing with, we need to make sure we get the content properly. Hence the differentiation of textfields and textareas.

The next step (lines 7 and 8 ) is to get the classes of the element we're currently checking. Classes can be v-required, v-digits, v-email, v-url and alike. We split the classes and put them into an array. Then, we loop through each class and test accordingly (lines 9 to 30). Based on test results, we modify the error variable.

We then check if there's any errors reported. If there's no errors the code from lines 72 to 76 will make necessary adjustments to our html for the user to see the field was correctly filled. On the other hand, if there were errors reported, the code between lines 34 and 69 will check the actual error type and modify html accordingly. The user will know they've done wrong, and how they've done wrong.

Functions to extend the validation process

If you payed attention to the above code you've seen that there are some function calls, functions which are not defined. Therefor, we must declare a few functions before we try using this plugin. These functions are coming up next:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function testEmail(value)
{
	return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
}
 
function testURL(value)
{
	return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
}
 
function testDigits(value)
{
	return /^\d+$/.test(value);
}
 
function testSecurity(value)
{
	return ((value==3)||(value=='three')||(value=='THREE'));
}

As their name suggest these functions test emails and URLs for validity, if a string contains only digits or if the security question was correctly answered.

Validation upon submit

We've seen how we validate data on the fly. Let's see how we validate data when the user clicks the submit button or presses enter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
$('#contactform').live('submit',function(){
		$('#contactform input.button').attr('disabled','disabled');
		$('#contactform input.button').val('Processing request');
		errors = 0;
		$('#contactform span.error').remove();
		$.each($('input[rel=error],textarea[rel=error],select[rel=error]'), function(){
			errors++; // count if there are errors
				error = 0; 
				inputText = '';
				inputText = $(this).val(); // this works for inputs
				if(inputText.length==0) inputText = $(this).text(); // this works for textareas
 
				classes = $(this).attr('class');
				classesArray = classes.split(' ');
				$.each(classesArray, function(index, value){
					if((value=='v-required')&&(inputText.length==0)&&(error==0))
					{// required field empty
						error = 1;
					}
					if((value=='v-digits')&&(testDigits(inputText)==false)&&(error==0))
					{ // field needs to be digits only
						error = 2;
					}
					if((value=='v-email')&&(testEmail(inputText)==false)&&(error==0))
					{ // field needs to be email format
						error = 3;
					}
					if((value=='v-url')&&(testURL(inputText)==false)&&(error==0))
					{ // field needs to be URL format
						error = 4;
					}
					if((value=='v-security')&&(testSecurity(inputText)==false)&&(error==0))
					{ // field needs to be URL format
						error = 5;
					}
				});
 
				if(error>0)
				{// there's some errors
					if(error==1) 
					{ 
						$(this).next('span.error').remove();?$(this).next('span.ok').remove();
						$('<span class="error">This is a required field</span>').insertAfter($(this));
						$(this).attr('rel','error');
					}
					else if(error==2) 
					{ 
						$(this).next('span.error').remove();?$(this).next('span.ok').remove();
						$('<span class="error">Digits only please</span>').insertAfter($(this));
						$(this).attr('rel','error');
					}
					else if(error==3) 
					{ 
						$(this).next('span.error').remove();?$(this).next('span.ok').remove();
						$('<span class="error">Invalid email</span>').insertAfter($(this));
						$(this).attr('rel','error');
					}
					else if(error==4) 
					{ 
						$(this).next('span.error').remove();?$(this).next('span.ok').remove();
						$('<span class="error">Invalid URL</span>').insertAfter($(this));
						$(this).attr('rel','error');
					}
					else if(error==5) 
					{ 
						$(this).next('span.error').remove();?$(this).next('span.ok').remove();
						$('<span class="error">Incorrect answer</span>').insertAfter($(this));
						$(this).attr('rel','error');
					}
					else
					{ 
						$(this).next('span.error').remove();?$(this).next('span.ok').remove();
						$('<span class="error">Unknown error</span>').insertAfter($(this));
						$(this).attr('rel','error');
					}
				}
				else
				{
					$(this).next('span.error').remove();
					$(this).next('span.ok').remove();
					$('<span class="ok">Ok</span>').insertAfter($(this));
					$(this).removeAttr('rel');
				}
		});
 
		if(errors==0) return true;
		else 
		{
			$('#contactform input.button').removeAttr('disabled');
			$('#contactform input.button').val('Correct errors and resend');
			return false; 
		}
	});

First line binds the submit event to the function to be executed. The following two lines disable the submit button and change the text on it. This way users won't be able to submit again the form if their connection is slow or the server is on heavy load. Changing the text will also alert users that their action was successful and their request is being processed.

We remove all error span elements that may have been added by on the fly validation because the code that's about to be executed will make the final checkups all over again. The code between the 8th line and the 82nd will check all fields that have an error class assigned to them, check out what is required for the field to validate and display messages just as the inline validation does (on the fly validation).

If no errors are reported, the function returns true and allows the form to submit itself (the return true on line 86 does the trick ). If there were any errors reported, the submit button's text is set such that the user sees there were processing errors. During this stage (lines 89 to 91) the button is re-enabled and default behavior of the form is prevented. The return false won't allow the form to be submitted towards the server's processing script.

That's all folks. We're done with client-side validation, but as mentioned above, we need to move to the mandatory part of the validation process, which is done on the server, were nobody can ruin things.

Server side validation

I'm going to cover a server side validation process written in php. PHP is very popular and other languages or frameworks such as RubyOnRails are straightforward when it comes to validating data in forms. As you've seen in the beginning of the tutorial, we have a couple of input fields and textareas we need to process. Therefor, we start our PHP by getting and storing the data filled in by the users.

1
2
3
4
5
6
		$name=$_POST['name'];                                    
		$email=$_POST['email'];
		$phone=$_POST['phone'];
		$company=$_POST['company'];
		$message=$_POST['message'];
		$security=$_POST['security'];

We then check if there's any required field that has not been filled. If javascript is on, these validation lines of code are pretty useless, but they need to be here because they are the last ones preventing malicious data entering your webserver.

1
2
	if(($name=='')||($email=='')||($phone=='')||($message=='')||($security==''))
        { //some error message }

If there were no errors at the previous check, we move forward and check if the email is valid, if the phone number contains only digits and if the security question has been answered correctly.

1
2
3
4
5
6
7
8
9
else if ( !preg_match( "/^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/", $email) )
		{ //error message
                }
else if(!is_numeric($phone))
		{ //error message
                }
else if(($security!="three")&&($security!="3")&&($security!="THREE"))
		{ //error message 
                }

If we got up to this point, our data is valid, there were no errors and we can process it. If you care to send an email, you can do that. If you want to add information to the database, you might do that as well.

1
2
else { // no errors, process data in here                                
       }

Server side enhancements

In the beginning of this tutorial I've pointed out that our form contains bits of php coding. The reason those variable printing are present is the following: The webform can be stored inside an external php file, which is included in our contact page. The processing page also includes this file if there were error messages. The result? The data users entered in the first stage, which is unfortunately invalid, is preserved. This enhances user experience as they don't have to type everything all over again but to correct their mistakes. Awesome right?

Conclusion

We've finally reached our ending point. We've learned in the first part of the tutorial the structures web forms can adopt, were to use them and why to use one over another. During this second part we've learned how to code a top-aligned form, style it using modern technologies such as CSS3, how to validate its data using javascript (client-side), and how to validate data server side using php.

I hope you all enjoyed the tutorial. Please share the link to your friends. You can stay updated to new content via our RSS feed or by email.

Must read

Published on Tuesday, March 23rd, 2010 at 7:37 pm in css, design, jQuery, layout, tutorials, usability.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. abdulchalik says: March 25th, 2010 at 6:35 am

    nice thanks for share

  2. Bogdan Pop says: March 25th, 2010 at 9:06 am

    Hey Abdul,

    thanks for dropping by!

  3. Guilherme says: March 30th, 2010 at 11:42 pm

    That was great! Thanks a lot for the post!

  4. Alex Flueras says: March 31st, 2010 at 6:56 am

    Great tutorial. I was actually looking for something like this. Thanks for sharing.

  5. Bogdan Pop says: March 31st, 2010 at 8:27 am

    Glad you found it useful!

  6. w3cvalidation says: April 9th, 2010 at 10:07 am

    Nice information, I really appreciate the way you presented. Thanks for sharing..

  7. Key usability in web forms says: May 25th, 2010 at 3:15 pm

    […] the theoretical aspects of web forms while the second one resides along the practical issues, coding and validating web forms. This article blends some concepts from both articles and showcases a key error that mustn't be in […]

  8. Abi says: August 6th, 2010 at 12:33 am

    I am fairly new to the coding world, and I am trying to figure out how this form works and where to put everything. I have used two of your other tutorials already, and I liked the fact that we could download all the files. Is there by any chance you could do that with this too?

  9. Bogdan Pop says: August 9th, 2010 at 1:40 am

    Hey Abi,

    At this time there’s other articles planned to be published. However, if I have some spare time I may post the full source codes in the near future.

    Cheers!

  10. Rnubi says: November 8th, 2010 at 7:13 pm

    I love this validation. I would like to know how you would go about using it with forms that contain radio fields. The radio fields are obviously groups of input fields and I have been trying to use this script to evaluate the contents of the radio field arrays. with not much luck. Any pointers would be greatly appreciated!

  11. Bogdan Pop says: November 20th, 2010 at 1:15 am

    Hi Rnubi, sorry for my late response. If you could post the code you’re using to validate the radio buttons it would come in very, very handy.

    This way I can’t possibly help you out without knowing any additional details.

  12. Martin Belisle says: September 19th, 2011 at 8:28 am

    I’m just starting to learn on CSS and still trying to fully understand. It’s fortunate I got into this site. Really helpful stuff.

  13. Elena Chin says: February 22nd, 2012 at 11:20 am

    I’m new in the coding world and am finding it hard to get some information that’s put simply (for us beginners). I think your post was very easy to follow.

  14. Neo A. says: February 23rd, 2012 at 4:24 am

    The work you put in to this detailed tutorial is quite commendable. I like how sophisticated the solutions described are.

    There is a part missing though — sql-injection prevention. Might it be it is due for another time and another tutorial?

    Neo A.
    SpurPress

  15. Bogdan Pop says: February 26th, 2012 at 3:46 pm

    Hi Neo A.

    the preg_match, is_numeric and security features of the form are sufficient against sql injection as well.

    To prevent message sql-injection you could define the cars you accept alone and use string_replace and preg_match to remove any attempts of hacking.





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.