Loading

Friday, December 28, 2007

AJAX Form Validation - Learn step by step

AJAX Form Validation learn step by step

1. Connect to the ajax database, and create a table named users with the following code:

CREATE TABLE users

(

user_id INT UNSIGNED NOT NULL AUTO_INCREMENT,

user_name VARCHAR(32) NOT NULL,

PRIMARY KEY (user_id)

);

2. Execute the following INSERT commands to populate your users table with some sample data (because user_id is an auto_increment column, its values will be generated by the database):

INSERT INTO users (user_name) VALUES ('bogdan');

INSERT INTO users (user_name) VALUES ('filip');

INSERT INTO users (user_name) VALUES ('mihai');

INSERT INTO users (user_name) VALUES ('emilian');

INSERT INTO users (user_name) VALUES ('paula');

INSERT INTO users (user_name) VALUES ('cristian');

3. In your ajax folder, create a new folder named validate.

4. Let's start writing the code with the presentation tier. Create a file named validate.css, and add the following code to it:

body

{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
}

label
{
float: left;
width: 150px;
font-weight: bold;
}
input, select
{
margin-bottom: 3px;
}
.button
{
font-size: 2em;
}
.left
{
margin-left: 150px;
}
.txtFormLegend
{
color: #777777;
font-weight: bold;
font-size: large;
}
.txtSmall
{
color: #999999;
font-size: smaller;
}
.hidden
{
display: none;
}
.error
{
display: block;
margin-left: 150px;
color: #ff0000;
}


AJAX Form Validation
AJAX Form Validation - Learn step by step PART-2

AJAX Form Validation - Learn step by step PART-3
AJAX Form Validation - Learn step by step PART-4
AJAX Form Validation - Learn step by step PART-5
AJAX Form Validation - Learn step by step PART-6


SHARE TWEET

Thank you for reading this article AJAX Form Validation - Learn step by step With URL http://x-tutorials.blogspot.com/2007/12/ajax-form-validation-learn-step-by-step_6567.html. Also a time to read the other articles.

0 comments:

Write your comment for this article AJAX Form Validation - Learn step by step above!