Blame view

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