jQuery Walidate 2.4 : The validation plugin where your existing form-markup doesn't matter! ( PUBLIC DEMO )

Simple and flexible form validation. Original: http://jsfiddle.net/tCH9S/

by Jens Grochtdreis

HTML

<script src="http://jquery.dop-trois.org/walidate/jquery.walidate.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form">
    <label for="vorname">Vorname</label>
    <input type="text" name="vorname" id="vorname" />
    
    <label for="vorname-verify">Vorname bestätigen</label>
    <input type="text" name="vorname-verify" id="vorname-verify" />
    
    <label for="nachname">Nachname</label>
    <input type="text" name="nachname" id="nachname" />
    
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email" />
    
    <label for="email-verify">E-Mail Bestätigen</label>
    <input type="text" name="email-verify" id="email-verify" />
    
    
    <label for="arrival">Anfahrt (HTML5)</label>
    <input type="datetime" name="arrival" id="arrival" />
    
    <label for="anzahl">Anzahl Personen (HTML5)</label>
    <input type="number" name="arrival" id="anzahl" />
        
    <label for="passwort">Passwort</label>
    <input type="password" name="passwort" id="passwort" />
    
    <label for="passwort-verify">Passwort bestätigen</label>
    <input type="password" name="passwort-verify" id="passwort-verify" />
    
    <label for="telefonnummer">Telefonnummer</label>
    <input type="text" name="telefonnummer" id="telefonnummer" />
    
    <label for="mitteilung">Mitteilung</label>
    <textarea name="mitteilung" id="mitteilung" cols="45" rows="5"></textarea>
    
    <label for="erste-option">Erste Option</label>
    <input type="checkbox" name="erste-option" id="erste-option" />
    <label for="zweite-option">Zweite Option</label>
    <input type="checkbox" name="zweite-option" id="zweite-option" />
    <label for="dritte-option">Dritte Option</label>
    <input type="checkbox" name="dritte-option" id="dritte-option" />
    
    <label for="radio-eins">Radio eins</label>
    <input type="radio" name="radio" id="radio-eins" value="radio-eins" />
    <label for="radio-zwei">Radio zwei</label>
...

CSS

* { margin: 0; padding: 0; }

body {
    padding: 13px;
    font: normal 10px/2.1em Georgia, serif;
}

#reset {
    float: none;
    clear: both;
    display: block;
    background: rgba(255, 0, 0, 0.2);
    color: red;
    text-decoration: none;
    text-align: center;
    border-top: 15px solid white;
    font-size: 12px;
    line-height: 2.5em;
}
h1 {
    font-size: 19px;
    margin-bottom: 9px;
}

h2 {
    font-size: 13px;
    margin-bottom: 17px;
}

#error-msg {
    display: none;
    background: black;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    text-align: center;
    position: fixed;
    left: 20px;
    right: 20px;
    top: 50%;
    margin-top: -100px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 9;
}

label {
    float: left;
    clear: left;
    display: block;
    width: 150px;
}

/* HTML5 */
[type="datetime"],
[type="datetime-local"],
[type="date"],
[type="month"],
[type="week"],
[type="time"],
[type="number"],
[type="range"],
[type="email"],
[type="color"],
[type="url"],
[type="search"],
/* HTML */
[type="password"],
[type="text"],
[type="file"],
select,
textarea {
    width: 250px;
    font: normal 10px/2.1em Georgia, serif;
    margin-bottom: 5px;
    padding: 2px 7px;
    border: 1px solid #bbb;
}

input,
textarea,
select {
    float: left;
}

input {
    -webkit-transition: all 0.3s;
}

input.required {
    border-right-color: red;
}

input:focus {
    outline: none;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 0.6);
}

input.error {
    border: solid 1px #960a06;
    box-shadow: 0 0 4px #f9a89f;
}

input.valid {
    border: solid 1px #598C28;
    box-shadow: 0 0 4px #7FC666;
}

JavaScript

/********************************************************
 * Website: http://jquery.dop-trois.org/walidate/
 ********************************************************/

/*******************************************************************************
 * USAGE
 *******************************************************************************/

/*******************************************************************************
 * 
 *    PLUGIN INITIALISIEREN
 *    
 *    Default-Werte des Plugins übernehmen: $('#form').walidate();
 *    oder
 *    Standard-Werte überschreiben. All diese Einstellungen sind optional.
 *    Die hier aufgeführten Werte entsprechen den Standardwerten.
 * 
 *******************************************************************************/
var i = 0;
$('#form').walidate({
    submitSelector: 'input[type="submit"]', // Selektor des Absenden-Buttons
    validateClass: 'validate',              // Klasse die jedem zu validierenden Element hinzugefügt wird
    requiredClass: 'required',              // Klasse die jedem erforderlichen Element hinzugefügt wird
    validClass: 'valid',                    // Klasse die jedem gültigen Element hinzugefügt wird
    errorClass: 'error',
    doIfAllIsValid: function() {
        console.log('sent!');
    },
    doIfSomethingIsInvalid: function() {
        console.log('error!');
    }
}, function() {                             // default: undefined;      (function)  runs after form initialisation
    // ...
});

$('#reset').click(function () {
    $('#form').walidate('reset', function(){
        console.log('my callback!');
    });
    return false;
});

/*******************************************************************************
 * 
 *    TEXT-ELEMENTS
 *    
 *    Nur auf leeren Inhalt prüfen: $('#vorname').walidate('validate');
 *    Für: [type="text"], [type="password"], [type="file"], [type="datetime"],
 *    [type="datetime-local"], [type="date"], [type="month"], [type="week"],
 *    [type="time"],...