jquery validation plugin

by Akram kamal

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">

<form method="get" class="cmxform" id="form1" action="">
    <fieldset>
        <legend>Login Form</legend>
        <p>
            <label>Username</label>
            <input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
        </p>
        <p>
            <label>Password</label>
            <input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
        </p>
        <div class="error">
        </div>
        <p>
            <input class="submit" type="submit" value="Login"/>
        </p>
    </fieldset>
</form>

<!-- our error container -->
<div class="container">
    <h4>There are serious errors in your form submission, please see below for details.</h4>
    <ol>
        <li><label for="email" class="error">Please enter your email address</label></li>
        <li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
        <li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
        <li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
        <li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
    </ol>
</div>

<form class="cmxform" id="form2" method="get" action="">
    <fieldset>
        <legend>Validating a complete form</legend>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" class="{validate:{required:true,email:true}}" />
        </p>
        <p>
            <label for="agree">Favorite Color</label>
            <select id="color"...

CSS

/**********************************

Use: Reset Styles for all browsers

***********************************/
    
body, p, blockquote {
    margin: 0;
    padding: 0;
}

a img, iframe { border: none; }
    
/* Headers
------------------------------*/

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
    
/* Lists
------------------------------*/
    
ul, ol, dl, li, dt, dd {
    margin: 0;
    padding: 0;
}
    
/* Links
------------------------------*/

a, a:link {}
a:visited {}
a:hover {}
a:active {}

/* Forms
------------------------------*/

form, fieldset {
    margin: 0;
    padding: 0;
}
    
fieldset { border: 1px solid #000; }

legend {
    padding: 0;
    color: #000;
}

input, textarea, select {
    margin: 0;
    padding: 1px;
    font-size: 100%;
    font-family: inherit;
}
    
select { padding: 0; }


body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }
body { margin: 0; padding: 0; font-size: small; color: #333 }
h1, h2 { font-family: 'trebuchet ms', verdana, arial; padding: 10px; margin: 0 }
h1 { font-size: large }
#main { padding: 1em; }
#banner { padding: 15px; background-color: #06b; color: white; font-size: large; border-bottom: 1px solid #ccc;
    background: url(http://jquery.bassistance.de/validate/demo/images/bg.gif) repeat-x; text-align: center }
#banner a { color: white; }
    
p { margin: 10px 0; }

li { margin-left: 10px; }

h3 { margin: 1em 0 0; }

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }




**********************************

Use: cmxform template

***********************************/
form.cmxform fieldset {
    margin-bottom: 10px;
}

form.cmxform legend {
    padding: 0 2px;
    font-weight: bold;
    _margin: 0 -7px; /* IE Win */
}

form.cmxform label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
    cursor: hand;
}

form.cmxform fieldset p {
    list-style:...

JavaScript

// only for demo purposes
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted! (skipping validation for cancel button)");
    }
});

$().ready(function() {
    alert('ready');
    $("#form1").validate({
        errorLabelContainer: $("#form1 div.error")
    });
    
    var container = $('div.container');
    // validate the form when it is submitted
    var validator = $("#form2").validate({
        errorContainer: container,
        errorLabelContainer: $("ol", container),
        wrapper: 'li',
        meta: "validate"
    });
    
    $(".cancel").click(function() {
        validator.resetForm();
    });
});