Easy Real-time Form Validation Plugin With jQuery - walidate

walidate is a powerful and user-friendly jQuery plugin that quickly adds form validation functionalities to your form elements, without changing any existing code of your web page.

Basic Usage:

1. Include jQuery library and jQuery walidate plugin on the web page

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. The html

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form">
<label for="vorname">name</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>
<input type="radio" name="radio" id="radio-zwei" value="radio-zwei" />
<label for="radio-drei">Radio drei</label>
<input type="radio" name="radio" id="radio-drei" value="radio-drei" />
<label for="Optionsschaltergruppe1_0">Optionsschalter eins</label>
<input type="radio" name="Optionsschaltergruppe1" value="optionsschalter_eins" id="Optionsschaltergruppe1_0" />
<label for="Optionsschaltergruppe1_1">Optionsschalter zwei</label>
<input type="radio" name="Optionsschaltergruppe1" value="optionsschalter_zwei" id="Optionsschaltergruppe1_1" />
<label for="Optionsschaltergruppe1_2">Optionsschalter drei</label>
<input type="radio" name="Optionsschaltergruppe1" value="optionsschalter_drei" id="Optionsschaltergruppe1_2" />
<label for="listen-menu-eins">Listen Menu eins</label>
<select name="listen-menu-eins" id="listen-menu-eins">
<option value="eins">Eins</option>
<option value="zwei">Zwei</option>
<option value="drei">Drei</option>
<option value="vier">Vier</option>
</select>
<label for="listen-menu-zwei">Listen Menu zwei</label>
<select name="listen-menu-zwei" id="listen-menu-zwei" multiple="multiple">
<option value="eins">Eins</option>
<option value="zwei">Zwei</option>
<option value="drei">Drei</option>
<option value="vier">Vier</option>
</select>
<label for="upload">Upload</label>
<input type="file" name="upload" id="upload" />
<label for="upload-zwei">Upload zwei</label>
<input type="file" name="upload-zwei" id="upload-zwei" />
<label for="math">2 + 2?</label>
<input type="text" name="math" id="math" />
<label for="senden">senden</label>
<input type="submit" name="senden" id="submit" value="Senden" />
<a id="reset" href="">Reset</a>
</form>

3. The CSS

#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;
}

4. The javascript

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
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"], [type="number"], [type="range"], [type="email"],
 *    [type="color"], [type="url"], [type="search"], textarea, [type="tel"]
 * 
 *******************************************************************************/
/* TEXT - EXAMPLE with every possible property ---------------------------------------------------- */
$('#vorname').walidate('validate', {
    standard: 'Vorname',                    // default: undefined;      (string)
    //required: false,                        // default: true;           (boolean)
    expression: /^[a-zA-Z]{3,}$/,           // default: undefined;      (Regex)
    eventHandler: 'blur keyup',             // default: blur change;    (string)
    valid: function() {                     // default: undefined;      (function)  runs if value is valid
        console.log('Vorname gültig!');
    },
    invalid: function() {                   // default: undefined;      (function)  runs if value is invalid
        console.log('Vorname ungültig!');
    },
    
    // allowed: ['Max'],                    // default: undefined;      (array)     more than one value possible
    prohibited: ['Vorname'],                // default: undefined;      (array)     more than one value possible
    
    verify: {                               // settings for the verify Textfield
        selector: '#vorname-verify',        // default: undefined;      (string)    CSS-Selector
        valid: function() {                 // default: undefined;      (function)  runs if verification is valid
            console.log('Vorname bestätigen gültig!');
        },
        invalid: function() {               // default: undefined;      (function)  runs if verification isn't valid
            console.log('Vorname bestätigen ungültig!');
        }
    }
}, function() {                             // default: undefined;      (function)  callback function.
    // do something after initialization of this element.
});

/* TEXT - EXAMPLE ---------------------------------------------------- */
$('#nachname').walidate('validate', {
    standard: 'Nachname',
    prohibited: ['Nachname'],
    eventHandler: 'blur keyup',
    valid: function() {
        console.log('Nachname gültig!');
    },
    invalid: function() {
        console.log('Nachname ungültig!');
    }
});

/* E-MAIL - EXAMPLE ---------------------------------------------------- */
$('#email').walidate('validate', {
    eventHandler: 'blur keyup',
    expression: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,10})+$/,
    valid: function() {
        console.log('Mail valid!');
    },
    invalid: function() {
        console.log('Mail not valid!');
    },
    verify: {
        selector: '#email-verify',
        valid: function() {
            console.log('E-Mail bestätigung gültig');
        },
        invalid: function() {
            console.log('E-Mail bestätigung ungültig');
        }
    }
});

/* PHONE - EXAMPLE ---------------------------------------------------- */
$('#telefonnummer').walidate('validate', {
    eventHandler: 'blur keyup',
    expression: /^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/,
    valid: function() {
        console.log('Telefonnummer gültig');
    },
    invalid: function() {
        console.log('Telefonnummer ungültig');
    }
});

/* PASSWORD - EXAMPLE ---------------------------------------------------- */
$('#passwort').walidate('validate', {
    eventHandler: 'blur keyup',
    valid: function() {
        console.log('Passwort gültig!');
    },
    invalid: function() {
        console.log('Passwort ungültig!');
    },
    verify: {
        selector: '#passwort-verify',
        valid: function() {
            console.log('Bestätigtes Passwort gültig!');
        },
        invalid: function() {
            console.log('Bestätigtes Passwort ungültig!');
        }
    }
});


/*******************************************************************************
 * 
 *    CHECKBOX-ELEMENTS
 *    
 *    Set checkbox as required: $('#checkbox').walidate('validate');
 *    Für: [type="checkbox"]
 * 
 *******************************************************************************/
/* CHECKBOX - EXAMPLE with every possible property ---------------------------------------------------- */
$('#erste-option').walidate('validate', {
    standard: true,                         // default: undefined;      (boolean)   checked if true
    required: false,                        // default: true;           (boolean)   runs if value is invalid
    valid: function() {                     // default: undefined;      (function)  runs if value is valid
        console.log('checked!');
    },
    invalid: function() {                   // default: undefined;      (function)  runs if value is valid
        console.log('unchecked!');
    }
}, function() {                             // default: undefined;      (function)  callback function.
    // do something after initialization of this element.
});
$('#zweite-option').walidate('validate');


/*******************************************************************************
 * 
 *    RADIO-ELEMENTS
 *    
 *    Set radio-group as required: $('input[type="radio"][name="myGroup"]').walidate('validate');
 * 
 *******************************************************************************/
/* RADIO - EXAMPLE with every possible property ---------------------------------------------------- */
$('input[type="radio"][name="radio"]').walidate('validate', {
    standard: ['radio-eins'],               // default: undefined;      (string)    use the text from value-attribute 
    required: false,                        // default: true;           (boolean)
    eventHandler: 'blur change',            // default: blur change;    (string)
    valid: function() {                     // default: undefined;      (function)  runs if value is valid
        console.log('Option gültig');
    },
    invalid: function() {                   // default: undefined;      (function)  runs if value is invalid
        console.log('Option ungültig');
    },
    // allowed: ['radio-eins'],             // default: undefined;      (array)     more than one value possible
    prohibited: ['radio-zwei']              // default: undefined;      (array)     more than one value possible
}, function(){                              // default: undefined;      (function)  callback function.
    // do something after initialization of this element.
});
$('input[type="radio"][name="Optionsschaltergruppe1"]').walidate('validate', {
    standard: ['optionsschalter_eins']
});


/*******************************************************************************
 * 
 *    SELECT-ELEMENTS
 *    
 *    Set a list as required: $('#listen-menu-eins').walidate('validate');
 * 
 *******************************************************************************/
/* SELECTION - EXAMPLE with every possible property ---------------------------------------------------- */
$('#listen-menu-eins').walidate('validate', {
    standard: ['zwei'],                  // default: undefined;      (string)    more than one value possible if its a multiple selection element.
    // required: true,                      // default: true;           (boolean)
    eventHandler: 'blur change',            // default: blur change;    (string)
    valid: function() {                     // default: undefined;      (function)  runs if value is valid
        console.log('Menü 1 valid!');
    },
    invalid: function() {                   // default: undefined;      (function)  runs if value is invalid
        console.log('Menü 1 invalid!');
    },
    // allowed: ['eins'],                   // default: undefined;      (array)     more than one value possible
    prohibited: ['zwei']                    // default: undefined;      (array)     more than one value possible, use the text from value-attribute 
}, function() {                             // default: undefined;      (function)  callback function.
    // do something after initialization of this element.
});

/* MULTIPLE-SELECTION - EXAMPLE ---------------------------------------------------- */
$('#listen-menu-zwei').walidate('validate', {
    allowed: ['zwei'],
    standard: ['zwei', 'vier'],
    valid: function() {
        console.log('Listen Menu zwei gültig');
    },
    invalid: function() {
        console.log('Listen Menu zwei ungültig');
    }
});

/* FILE - EXAMPLE ---------------------------------------------------- */
$('#upload').walidate('validate');

$('#upload-zwei').walidate('validate', {
    expression: /(?:gif|jpg|png|bmp|txt)$/,
    valid: function() {
        console.log('Upload 2 valid!');
    },
    invalid: function() {
        console.log('Upload 2 invalid!');
    }
}, function() {
    $(this).addClass('yeey');
});

/* HTML5 - EXAMPLE ---------------------------------------------------- */
$('#arrival').walidate('validate');
$('#anzahl').walidate('validate');

/* MATH - CALCULATING - EXAMPLE ---------------------------------------------------- */
$('#math').walidate('validate', {
    eventHandler: 'blur keyup',
    allowed: ['4']
});
});//]]>  

</script>

Change log:

2015-08-24

• JS update.

---

This awesome jQuery plugin is developed by doptrois. For more Advanced Usages, please check the demo page or visit the official website.