This time I will share jQuery Plugin and tutorial about Easy Real-time Form Validation Plugin With jQuery – walidate, hope it will help you in programming stack.
File Size:
12.9 KB
Views Total:
6415
Last Update:
6 years ago
Publish Date:
8 years ago
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
2. The html
01<form action="" method="post" enctype="multipart/form-data" name="form1" id="form">
02<label for="vorname">name</label>
03<input type="text" name="vorname" id="vorname" />
04<label for="vorname-verify">Vorname bestätigen</label>
05<input type="text" name="vorname-verify" id="vorname-verify" />
06<label for="nachname">Nachname</label>
07<input type="text" name="nachname" id="nachname" />
08<label for="email">E-Mail</label>
09<input type="text" name="email" id="email" />
10<label for="email-verify">E-Mail Bestätigen</label>
11<input type="text" name="email-verify" id="email-verify" />
12<label for="arrival">Anfahrt (HTML5)</label>
13<input type="datetime" name="arrival" id="arrival" />
14<label for="anzahl">Anzahl Personen (HTML5)</label>
15<input type="number" name="arrival" id="anzahl" />
16<label for="passwort">Passwort</label>
17<input type="password" name="passwort" id="passwort" />
18<label for="passwort-verify">Passwort bestätigen</label>
19<input type="password" name="passwort-verify" id="passwort-verify" />
20<label for="telefonnummer">Telefonnummer</label>
21<input type="text" name="telefonnummer" id="telefonnummer" />
22<label for="mitteilung">Mitteilung</label>
23<textarea name="mitteilung" id="mitteilung" cols="45" rows="5"></textarea>
24<label for="erste-option">Erste Option</label>
25<input type="checkbox" name="erste-option" id="erste-option" />
26<label for="zweite-option">Zweite Option</label>
27<input type="checkbox" name="zweite-option" id="zweite-option" />
28<label for="dritte-option">Dritte Option</label>
29<input type="checkbox" name="dritte-option" id="dritte-option" />
30<label for="radio-eins">Radio eins</label>
31<input type="radio" name="radio" id="radio-eins" value="radio-eins" />
32<label for="radio-zwei">Radio zwei</label>
33<input type="radio" name="radio" id="radio-zwei" value="radio-zwei" />
34<label for="radio-drei">Radio drei</label>
35<input type="radio" name="radio" id="radio-drei" value="radio-drei" />
36<label for="Optionsschaltergruppe1_0">Optionsschalter eins</label>
37<input type="radio" name="Optionsschaltergruppe1" value="optionsschalter_eins" id="Optionsschaltergruppe1_0" />
38<label for="Optionsschaltergruppe1_1">Optionsschalter zwei</label>
39<input type="radio" name="Optionsschaltergruppe1" value="optionsschalter_zwei" id="Optionsschaltergruppe1_1" />
40<label for="Optionsschaltergruppe1_2">Optionsschalter drei</label>
41<input type="radio" name="Optionsschaltergruppe1" value="optionsschalter_drei" id="Optionsschaltergruppe1_2" />
43<select name="listen-menu-eins" id="listen-menu-eins">
44<option value="eins">Eins</option>
45<option value="zwei">Zwei</option>
46<option value="drei">Drei</option>
47<option value="vier">Vier</option>
49<label for="listen-menu-zwei">Listen Menu zwei</label>
50<select name="listen-menu-zwei" id="listen-menu-zwei" multiple="multiple">
51<option value="eins">Eins</optionShare this:
