Subversion-Projekte lars-tiefland.zeldi.de

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
	<meta charset="utf-8">
5 
	<title>My Page</title>
6 
	<meta name="viewport" content="width=device-width, initial-scale=1">
7 
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
8 
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
9 
	<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
10 
	<script src="../dist/jquery.validate.js"></script>
11 
	<style>
12 
	label.error {
13 
		color: red;
14 
		font-size: 16px;
15 
		font-weight: normal;
16 
		line-height: 1.4;
17 
		margin-top: 0.5em;
18 
		width: 100%;
19 
		float: none;
20 
	}
21 
	@media screen and (orientation: portrait) {
22 
		label.error {
23 
			margin-left: 0;
24 
			display: block;
25 
		}
26 
	}
27 
	@media screen and (orientation: landscape) {
28 
		label.error {
29 
			display: inline-block;
30 
			margin-left: 22%;
31 
		}
32 
	}
33 
	em {
34 
		color: red;
35 
		font-weight: bold;
36 
		padding-right: .25em;
37 
	}
38 
	</style>
39 
</head>
40 
<body>
41 
<div id="page1" data-role="page">
42 
	<div data-role="header">
43 
		<h1>Welcome</h1>
44 
	</div>
45 
	<div data-role="content">
46 
		<form method="GET">
47 
			<div data-role="fieldcontain">
48 
				<label for="email">Email:</label>
49 
				<input type="email" name="email" id="email">
50 
			</div>
51 
			<div data-role="fieldcontain">
52 
				<label for="password">Password:</label>
53 
				<input type="password" name="password" id="password">
54 
			</div>
55 
			<input data-role="submit" type="submit" value="Login">
56 
		</form>
57 
	</div>
58 
</div>
59 
<script>
60 
$( "#page1" ).on( "pageinit", function() {
61 
	$( "form" ).validate({
62 
		rules: {
63 
			email: {
64 
				required: true
65 
			},
66 
			password: {
67 
				required: true
68 
			}
69 
		},
70 
		errorPlacement: function( error, element ) {
71 
			error.insertAfter( element.parent() );
72 
		}
73 
	});
74 
});
75 
</script>
76 
</body>
77 
</html>