Validate (jQuery Plugin): Unterschied zwischen den Versionen
Aus Wikizone
Kholja (Diskussion | Beiträge) |
|||
| Zeile 1: | Zeile 1: | ||
| + | Siehe auch [[jQuery - ValidationEngine]] | ||
| + | |||
== Links == | == Links == | ||
Version vom 1. August 2013, 05:44 Uhr
Siehe auch jQuery - ValidationEngine
Links
http://docs.jquery.com/Plugins/Validation
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)
Anleitung
Standard Validierung
Standardmäßig wird einfach in der Initialisierung das Formular mitgegeben (jQuery Standards)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate();
});
</script>
In den Formularen werden einfach Klassen mitgegeben. Anhand dieser validiert das Tool:
<input class="required" type="text" value="" name="tx_gbtelecash_pi1[firstname]">
Standard Klassen zur Validierung
Die wichtigsten sind:
class=”required”: Feld muss gesetzt sein class=”url”: Feld muss eine gültige URL enthalten class=”email”: Feld muss eine gültige E-Mail enthalten class=”required email”: Feld muss gesetzt und eine gültige E-Mail enthalten
Weitere Validierungsmöglichkeiten über die validate() Funktion
Neben diese Klassen gibt es weitere Möglichkeiten zur Überprüfung. Die wichtigsten hierbei sind:
minlength=”int” (Bsp.: minlength=”3″) maxlength=”int” (Bsp.: maxlength=”7″) min=”int” (Bsp.: min=”3″) max=”int” (Bsp.: max=”7″) equalTo=”id” (Bsp.: equalTo=”#passwort”) range=”int1int2″ (Bsp.: Zahlen zwischen 3 und 7: range=”37″)
Beispiel:
validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6
},
email: {
required: true,
email: true
}
}
})
Eigene Validierungsmeldungen definieren
validate({
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
}
})
Validierung debuggen
Das Plugin hilft über den Parameter debug beim validieren:
validate({ debug: true })
Aktiviert den Debug-Modus. Das Formular wird nicht abgeschickt und vorhandene Fehler werden in der Fehlerkonsole angezeigt (benötigt Firebug oder Firebug Lite)
Eigene Funktionen ausführen
validate({ submitHandler: function(){###} })
Sollte das Formular valide sein, wird der durch ### symbolisierte Quellcode ausgeführt. Ersetzt dabei das Standardverhalten beim Absenden des Formulars.
Komplettes Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>
<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>
<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
