Easy Real-time Form Validation Plugin With jQuery - walidate
File Size: | 12.9 KB |
---|---|
Views Total: | 6679 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.