Bearbeiten von „Validate (jQuery Plugin)“

== 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 ==
<pre>
<!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>
</pre>