Subversion-Projekte lars-tiefland.zeldi.de_alt

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
<meta charset="utf-8">
5 
<title>Test for jQuery validate() plugin</title>
6 
 
7 
<link rel="stylesheet" media="screen" href="css/screen.css">
8 
 
9 
<script src="../lib/jquery.js"></script>
10 
<script src="../dist/jquery.validate.js"></script>
11 
 
12 
<style>
13 
.cmxform fieldset p label span.error { color: red; }
14 
form.cmxform { width: 30em; }
15 
form.cmxform label {
16 
	width: auto;
17 
	display: block;
18 
	float: none;
19 
}
20 
</style>
21 
 
22 
<script>
23 
// only for demo purposes
24 
$.validator.setDefaults({
25 
	submitHandler: function() {
26 
		alert("submitted!");
27 
	}
28 
});
29 
 
30 
$().ready(function() {
31 
	// validate the form when it is submitted
32 
	var validator = $("#form1").validate({
33 
		errorPlacement: function(error, element) {
34 
			// Append error within linked label
35 
			$( element )
36 
				.closest( "form" )
37 
					.find( "label[for='" + element.attr( "id" ) + "']" )
38 
						.append( error );
39 
		},
40 
		errorElement: "span",
41 
		messages: {
42 
			user: {
43 
				required: " (required)",
44 
				minlength: " (must be at least 3 characters)"
45 
			},
46 
			password: {
47 
				required: " (required)",
48 
				minlength: " (must be between 5 and 12 characters)",
49 
				maxlength: " (must be between 5 and 12 characters)"
50 
			}
51 
		}
52 
	});
53 
 
54 
	$(".cancel").click(function() {
55 
		validator.resetForm();
56 
	});
57 
});
58 
</script>
59 
 
60 
</head>
61 
<body>
62 
 
63 
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
64 
<div id="main">
65 
 
66 
	<p>Errors use spans placed within existing label element</p>
67 
 
68 
	<form method="get" class="cmxform" id="form1" action="">
69 
		<fieldset>
70 
			<legend>Login Form</legend>
71 
			<p>
72 
				<label for="user">Username</label>
73 
				<input id="user" name="user" required minlength="3">
74 
			</p>
75 
			<p>
76 
				<label for="password">Password</label>
77 
				<input id="password" type="password" maxlength="12" name="password" required minlength="5">
78 
			</p>
79 
			<p>
80 
				<input class="submit" type="submit" value="Login">
81 
			</p>
82 
		</fieldset>
83 
	</form>
84 
 
85 
	<a href="index.html">Back to main page</a>
86 
 
87 
</div>
88 
 
89 
 
90 
</body>
91 
</html>