Subversion-Projekte lars-tiefland.faltradxxs.de

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 
	<link rel="stylesheet" media="screen" href="css/screen.css">
7 
	<script src="../lib/jquery.js"></script>
8 
	<script src="../dist/jquery.validate.js"></script>
9 
	<script>
10 
	// extend the current rules with new groovy ones
11 
 
12 
	// this one requires the text "buga", we define a default message, too
13 
	$.validator.addMethod("buga", function(value) {
14 
		return value == "buga";
15 
	}, 'Please enter "buga"!');
16 
 
17 
	// this one requires the value to be the same as the first parameter
18 
	$.validator.methods.equal = function(value, element, param) {
19 
		return value == param;
20 
	};
21 
 
22 
	$().ready(function() {
23 
		var validator = $("#texttests").bind("invalid-form.validate", function() {
24 
			$("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
25 
		}).validate({
26 
			debug: true,
27 
			errorElement: "em",
28 
			errorContainer: $("#warning, #summary"),
29 
			errorPlacement: function(error, element) {
30 
				error.appendTo(element.parent("td").next("td"));
31 
			},
32 
			success: function(label) {
33 
				label.text("ok!").addClass("success");
34 
			},
35 
			rules: {
36 
				number: {
37 
					required: true,
38 
					minlength: 3,
39 
					maxlength: 15,
40 
					number: true
41 
				},
42 
				secret: "buga",
43 
				math: {
44 
					equal: 11
45 
				}
46 
			}
47 
		});
48 
 
49 
	});
50 
	</script>
51 
	<style>
52 
	form.cmxform {
53 
		width: 50em;
54 
	}
55 
	em.error {
56 
		background:url("images/unchecked.gif") no-repeat 0px 0px;
57 
		padding-left: 16px;
58 
	}
59 
	em.success {
60 
		background:url("images/checked.gif") no-repeat 0px 0px;
61 
		padding-left: 16px;
62 
	}
63 
	form.cmxform label.error {
64 
		margin-left: auto;
65 
		width: 250px;
66 
	}
67 
	em.error {
68 
		color: black;
69 
	}
70 
	#warning {
71 
		display: none;
72 
	}
73 
	</style>
74 
</head>
75 
<body>
76 
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
77 
<div id="main">
78 
	<form class="cmxform" id="texttests" method="get" action="foo.html">
79 
		<h2 id="summary"></h2>
80 
		<fieldset>
81 
			<legend>Example with custom methods and heavily customized error display</legend>
82 
			<table>
83 
				<tr>
84 
					<td>
85 
						<label for="number">textarea</label>
86 
					</td>
87 
					<td>
88 
						<input id="number" name="number" title="Please enter a number with at least 3 and max 15 characters!">
89 
					</td>
90 
					<td></td>
91 
				</tr>
92 
				<tr>
93 
					<td>
94 
						<label for="secret">Secret</label>
95 
					</td>
96 
					<td>
97 
						<input name="secret" id="secret">
98 
					</td>
99 
					<td></td>
100 
				</tr>
101 
				<tr>
102 
					<td>
103 
						<label for="math">7 + 4 =</label>
104 
					</td>
105 
					<td>
106 
						<input id="math" name="math" title="Please enter the correct result!">
107 
					</td>
108 
					<td></td>
109 
				</tr>
110 
			</table>
111 
			<input class="submit" type="submit" value="Submit">
112 
		</fieldset>
113 
	</form>
114 
	<h3 id="warning">Your form contains tons of errors! Please try again.</h3>
115 
	<p><a href="index.html">Back to main page</a></p>
116 
</div>
117 
</body>
118 
</html>