jQuery Walidate is a form validation plugin that runs on every HTML form without changing anything in the existing markup. It is designed to be as easy as possible.

check validation before submit form, form validation alert messages, simple jquery form validation example, real time form validation jquery

How to make use of it:

1. Embed the jQuery library and jQuery walidate plugin on the webpage.

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

2. 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. 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;
}

easy real-time form validation javascript, jQuery Walidate Plugin/Github, validation in javascript for registration form

See Demo And Download

Official Website(doptrois): Click Here

This superior jQuery/javascript plugin is developed by doptrois. For extra advanced usage, please go to the official website.