Developer News: Jquery: Form validation+Rounded Corners+List Items
Posted by: kaotikOn 2009/8/26 16:00:00 23692 readsThis tutorial will teach you 4 things:
* How to apply rounded corners
* Form validation
* Passing variables into a list
* Customizing jquery plugins
First go to google code (http://code.google.com/p/jqueryxoops/downloads/list) and download tutorial 12. This zip has all the files you need. They are from my previous tutorial.
Part 1 - Rounded corners
Let's start with rounded corners. Open test.php and replace all code with this:
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:200px; height:70px;}
style>
<script type="text/javascript" src="firebug.js">
<script language="javascript" src="jquery-1.3.2.min.js">
<script language="javascript" src="jquery.corner.js">
<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$('#myformDiv').corner(); // Rounds corners of selected div. In this example "myformDiv"
$("#subBut").click(function(event) {
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
});
});
script>
<div id="myformDiv">
<form name="form1" id="form1" method="post" action="">
<label>Name
<input type="text" name="textfield" id="textfield">
label>
<input type="button" name="subBut" id="subBut" value="Submit">
form>
div>
<br />
<div id="box">Ajax calldiv> Here's the changes:
Line 2 - I created a new ID style called "myformDiv" gave it a background color, width and height
Line 8- Load our rounded corners plugin.
Line 13- This is where we set rounded corners. I've binded the jquery plugin "corners" to the selector myformDiv. You will notice the empty (). You can set the radius of the corner and even which corners you want to round. 1,2,3 or all 4 (this case) are possible.
Line 22 and 29 - I've created a div around my form. This is what gets rounded.
Easy wasn't it? let's move on.
Part 2 - Validation
Form validation is one of those things best done with javascript. Why come back to the server to check if a user has filled all requiered fields? Now, in order for form validation to also work with ajax, we have to combine both. Replace all code from test.php with this:
<style type="text/css">
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:300px; height:170px;}
.error-highlight {border: 2px solid #f00;}
.errMissFld {color: #f00;}
style>
<script type="text/javascript" src="firebug.js">
<script language="javascript" src="jquery-1.3.2.min.js">
<script language="javascript" src="jquery.corner.js">
<script language="javascript" src="jquery.validation.js">
<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$('#myformDiv').corner(); // Rounds corners of selected div. In this example "myformDiv"
$('#form1').bind('submit', function() {
tst= $(this).validation();
if(tst==false){return tst;}
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
return false;
});
});
script>
<div id="myformDiv">
<form name="form1" id="form1" method="post" action="">
<p class="required-field">
<label>Name
<input type="text" name="name" id="name">
label>
p>
<p class="required-field">
<label>Name
<input type="text" name="address" id="address">
label>
p>
<input type="submit" name="subBut" id="subBut" value="Submit">
form>
<div class="errMissFld">
div>
div>
<br />
<div id="box">Ajax calldiv> Line 4 - Will create a red border around any form element that's requiered and isn't filled
Line 5 - make my error message red
Line 18- I had to change things a little from my previous example. In order for ajax and validation to play nice with each other, I am now binding the submit button of the form "form1".
Line 19 - It will perform validation on all elements inside form "form1".
Line 20 - If validation failed, meaning a requiered field is empty, then it will stop executing anything beyond this point and return. If, however validation was true then it will continue processing the remaing code inside this function.
Line 30 and 35 - I've wrapped the fields I want to be requiered with
elements (could be div, etc) with a class of "required-field". Pleae note that this isn't the original jquery.validation plugin. It's been hacked by me to perform this way.
open myserv.php and replace all code with this:
echo "hello world! My name is " . $_GET['name'];
?> Since I am now using 2 text fields, I've named them diferently, hence the change in myserv.php Moving on.
Part 3 - Passing variables
We are now going to create a list of text that allows users to click and then pass info to server through ajax. One of the advantages of using javascript over php is that we can take advantage of html code, what does this mean? Open test.php and replace all code with this:
//Pretend I have a lot of radio stations to choose from. I will use this for the list.
$vals=array();
for ($i = 1; $i <= 6; $i++) {
$vals[$i]['id']=$i;
$vals[$i]['name']='Name of Radio Station:'.$i;
}
?>
#box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
#myformDiv { background-color:#FF9900; width:300px; height:170px;}
.error-highlight {border: 2px solid #f00;}
.errMissFld {color: #f00;}
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$('#myformDiv').corner(); // Rounds corners of selected div. In this example "myformDiv"
$('#form1').bind('submit', function() {
tst= $(this).validation();
if(tst==false){return tst;}
var formContent = $("#form1").serialize();
$("#box").load('myserv.php',formContent);
return false;
});
$(".mylink").bind("click", function() {
var hol=$(this).attr('myval');
var formContent ="action=radio&link="+hol;
$("#box").load('myserv.php',formContent);
});
});
Re: Jquery: Form validation+Rounded Corners+List Items
