You can find it all here.
Share on FacebookYou can find it all here.
Share on Facebookhttp://www.marginallyclever.com/forms/
A short while ago I posted about my PHP form system. People wrote in with many questions, leading me to the conclusion that the old system with it’s klunky javascript, lack of commenting, and general disarray …was not very friendly. So I’ve written a whole new library with examples, templates, better CSS, better email validation, and better url validation, not to mention code you can really use right off the shelf with a Creative Commons license. Try version 1.0 today and let me know what you think!
Share on FacebookIn Part 1 I showed you how to simplify building basic forms in PHP.
In Part 2 I extended this to show you almost every input type you’d ever want. (For the full set, hire me!)
Now in Part 3, let’s add some friendly javascript to make sure your users input valid data.
I shouldn’t need to point out that Javascript isn’t enough. If, for any reason, javascript doesn’t run then all your tests will be ignored and bad data can be input. Injection attacks can also circumvent javascript with ease. There is no way to avoid PHP testing server-side, but javascript is friendly to the average user and saves your server bandwidth.
The first thing we’ll need is to identify where we’ll need to add tests.
In every case we’ll need some javascript in the <head> section of the page. Something like…
function test_form_X() { // where X is the name of a form, in case there are multiple forms on the same page ok=true; msg=''; first=1; $('#X .form_item').removeClass('error'); // jQuery/CSS magic! ... // let's assume we have a form element called form_element_N. if(is_form_element_N_ok()==false) { ok=false; msg+='Form element N is no good!\n'; if(first) { form_element_N.focus(); first=0; } // every input/select/textarea is inside an input_item inside a form_item. $('#form_element_N').parent.parent.addClass('error'); // jQuery/CSS magic! } ... if(ok==false) alert(msg); return ok; }
The trick is twofold: knowing which is_form_element_N_ok() to put in. First, I take that whole inner part of the test and put it in a function by itself.
function add_form_error($name,$message) { $str =" if(first) {\n"; $str.=" first=0;\n"; $str.=" \$('#$name').focus();\n"; $str.=" }\n"; $str.=" \$('#$name').parent.parent.addClass('error');\n"; $str.=" ok=false;\n"; $str.=" msg+='".str_replace(array("'","\'"),$message)."';\n"; return $str; }
so let’s create our first test. We’ll have to update create_form_start().
// Create a javascript error message for fields that can't be left blank. function add_form_test_required($name,$label=null) { $test=" if(\$('$name').value==null || \$('$name').value.length==0) {\n" .add_form_error($name,"$label is required.\n") ." }\n"; add_form_test($test,$name); } function add_form_test($test,$name) { global $forms_to_validate,$last_form_name; $forms_to_validate[$last_form_name].=$test; } function create_form_start(name='form1',$classname='form',$action='',$method='post',$target='') { global $forms_to_validate,$last_form_name; $forms_to_validate[$name]=''; $last_form_name=$name; return " < form id="$name" class="$classname" action="$action" enctype="multipart/form-data" method="$method">\n"; }
So where do these tests go? Well, when we’re ready to echo the page, we call the following method
function form_header() { global $forms_to_validate; echo " <script type="'text/javascript'"><!--mce:0--></script>\n"; }
So what does this mean? It means we can have our forms built in a few lines of code.
$body=create_form_start(); $body.=create_form_text('name','Name','','Your Name'); $body.=create_form_password('user_pass','Password','','Your Password. <a href="forgot.php">Did you forget your password?</a>'); $body.=create_form_required('name','Name');
There is nothing stopping us from writing a test inside create_form_password that checks the password is a certain length, or from adding a “confirm password” field and checking they are both the same. This same technique can be extended in any way you please.
As an interesting aside, HTML5 supports URLs and emails natively – the tests are built right into the web browser. No need for javascript!
Share on Facebook