[Tutorial] jQuery - Wicked form validation

**Sirupsen** · 04-09-2009

1 Introduction
I'm gonna try to show you guys how to make jQuery form validation. jQuery is a Javascipt Libary, which simplifies Javascripting. For jQuery theres plugins, one of them is the Validation plugin - this is what we're gonna talk about.
This tutorial you'll end up with this:
http://www.sirupsen.dk/jQuery
Which you can style for your liking!

2 Let's do it!
To make all this work, you gotta have the Javascript documents included in your file. You can either download them from jQuery.com, or you can just insert their URL's, which means you'll always have the latest version.
As it's easiest to just include the latest version from their website, that is what I'm gonna show you to do:

2.1 Including the Libaries
Between your <head> tags, you gotta insert the following code to include the jQuery Libary, and the form validation plugin for jQuery:

HTML Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

2.2 The Plan!
We want to have a plan for what's going to happen, here is our plan:

Username - Required field, should be between 3 and 20 characters
Password1 - Required field, minimum 6 characters, max 20
Password2 - Required field, has to be equal to Password 1 (Confirming)
Email - Required field, check if it's really an email
If everything is true, let the user submit the form. If not, lead him to the field(s) that are incorrect.

2.3 Making the Form
Of course, we need the HTML inputs so the user can type something we can validate, I'm not going into detail of this - just make a basic form, or use the one I made:

HTML Code:

    <form id="form1" method="post" action="?register=send"> 
        <div id="form">
                <p>Username</p>
                <input type="text" id="username" name="username" /><br>
                <p>Password</p>
                <input type="password" id="password1" name="password1" /><br>
                <p>Confirm Password</p>
                <input type="password" id="password2" name="password2" /><br>
                <p>Email</p>
                <input type="text" id="email" name="email" /><br>
            <input class="submit" id="submit" type="submit" name="submit" value="Submit" />
        </div>
    </form>

Now we have our form! If you upload and run the file, it should look something like this:

2.4 The CSS
We wanna have some colored text, and pictures when it's right/wrong, like this:

This is done by defining classes in the jQuery, that CSS styles for us.
Which means that if the field passed the validation, set a tick - if not, make the field eye catching and set a cross.

Here is my CSS file, edit is as you like - comments added for making that part easier:

HTML Code:

<style type="text/css"> 
input.error { 
/* If the field is error, color it like this */
    background: #FBE3E4;
    color: #D12F19;
    border-color: #FBC2C4;
}    
 label.error {
/* If the field is wrong, style the error text like this */
        background: url('http://www.sirupsen.dk/sirup/style/icon/cross.png') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
        color: red;
}
label.valid {
/* If the field is right, style the label like this */
        background: url('http://www.sirupsen.dk/sirup/style/icon/tick.png') no-repeat;
        padding-left: 16px;
        margin-left: .3em; 
}
#form {
/* Rawr */
    width:400px;
}
 input{
/* Float the inputs to the left */
    float:left;
}
</style>

Config it as you like.

2.5 The Script
Now time for the script which validates the entire thing. I'm gonna just put in the entire code, and comment it:

HTML Code:

<script type="text/javascript"> 
    $(document).ready(function() { 
// Validate starting
        $("#form1").validate({
// Validate form with Id = Form1
            success: "valid", // Give the label the class "valid" when it's OK.
            rules: { // Rules for our stuff
                username: // the input with the ID username:
                    {
                        required: true, //Is required
                        rangelength: [3, 20], // Gotta be 3-20 characters
                }, // close it - "," means = "more to come"
                password1:  // the input with the id password 1
                    {
                        required: true, // is required 
                        rangelength: [6, 20]   // gotta be 6-20 characters
                },
                password2: // id password2
                    {
                        required: true,
                        equalTo: "#password1" // HAS to be EQUAL TO item with the ID password1
                },
                email: 
                    {
                        required: true,
                        email: true // Has to be an email
                }
            }        
        });          // Closing everything
    });
</script>

Save it all as a .php file, and upload the entire thing to your web server. You can also save it as .html, edit the form action to something like: "validated.html", if you don't wanna upload it.

3. Testing
Now we have to test the script. The action for the script right now is ?register=send, so this has to happen when everything is valid. A short movie on how it should look:
jQuery

4. I have more fields, I need more functions!
Sure, you can see the docs for this plugin here.

5. Source for the entire thing:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<!-- Javascript Libaries -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#form1").validate({
            success: "valid",
            rules: { 
                username: 
                    {
                        required: true,
                        rangelength: [3, 20],
                },
                password1: 
                    {
                        required: true,
                        rangelength: [6, 12]      
                },
                password2: 
                    {
                        required: true,
                        equalTo: "#password1"
                },
                email: 
                    {
                        required: true,
                        email: true 
                }
            }        
        }); 
    });

</script> 
     
<style type="text/css"> 
    input.error { 
    background: #FBE3E4;
    color: #D12F19;
    border-color: #FBC2C4;
    }    
    label.error {
        background: url('http://www.sirupsen.dk/sirup/style/icon/cross.png') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
        color: red;
    }
    label.valid {
        background: url('http://www.sirupsen.dk/sirup/style/icon/tick.png') no-repeat;
        padding-left: 16px;
        margin-left: .3em; 
    }
    #form {
    width:400px;
    }
    input{
    float:left;
    }
</style>
 
</head>
<body>
    <form id="form1" method="post" action="?register=send"> 
        <div id="form">
                <p>Username</p>
                <input type="text" id="username" name="username" /><br>
                <p>Password</p>
                <input type="password" id="password1" name="password1" /><br>
                <p>Confirm Password</p>
                <input type="password" id="password2" name="password2" /><br>
                <p>Email</p>
                <input type="text" id="email" name="email" /><br>
            <input class="submit" id="submit" type="submit" name="submit" value="Submit" />
        </div>
    </form> 

</body>
</html>

6. End
Here is how I've styled it for my own website:

If there is request for the PHP code for the register script working with the scriping, request it here.

Please tell me if you get any errors.

Hope you could use this!

Shout-Out

User Tag List

Thread: [Tutorial] jQuery - Wicked form validation

Thread Tools

Search Thread

[Tutorial] jQuery - Wicked form validation

Similar Threads

[all class] Morph into warlock´s demon form for as long as you want !(Video tutorial)

[Tutorial] Move a borderless form

Game Hacking Tutorial!

Skeletal Form and Mounted

OwnedCore Forums

casino

CoreCoins

My OwnedCore

About Us

Casino