1
Form validation is a function best performed with javascript. Why come back to the server to check if a field is or isn't filled? Since my last example I showed how to perform an ajax call with jquery. I will now extend that code.
In this version, javascript will first check if all required fields are filled, is they are THEN it will perform the ajax call. In this version the call is done with POST (in my previous example I did the call with GET).
Javascript code:
<script type="text/javascript" charset="utf-8">
var tst=false; // create a javascript variable
$(document).ready(function() {
//when the submit butotn is pressed, execute some code. In this case first test if the requiered fields were filled. If all requiered are filled, continue to ajax function.
$('#hello').bind('submit', function() {
tst= $(this).validation(); //perform validation for each requiered field
// if the field isn't filled, the function validation() will return FALSE. In this case don't continue executing code and RETURN.
if(tst==false){return tst;}
// ajax form controler
$(this).ajaxSubmit({
target: '#radiolistresponse' /* Target div where myserv.php (set in first line of form html code) utput will be placed */
});
return false; // <-- important!
});
});
script>
-This version will flash a red box around any field that is required and isn't filled. The color and layout are defined by css inside the html file.
-As usual, this version also uses firebug.js so you can easily log variables, view ajax calls, etc. Great for debugging.
View DemoDownload files:
example 3
