Validate (jQuery Plugin): Unterschied zwischen den Versionen
Aus Wikizone
(→Links) |
(→Links) |
||
| Zeile 1: | Zeile 1: | ||
== Links == | == Links == | ||
| + | |||
| + | |||
http://docs.jquery.com/Plugins/Validation/validate#options | http://docs.jquery.com/Plugins/Validation/validate#options | ||
| − | + | http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05) | |
== Validate Snippets == | == Validate Snippets == | ||
Version vom 16. Mai 2012, 15:16 Uhr
Links
http://docs.jquery.com/Plugins/Validation/validate#options
http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)
Validate Snippets
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>
