forked from wpic/bootstrap.validator.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
172 lines (148 loc) · 5.27 KB
/
sample.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html class="no-js" lang='en'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body {
padding-top: 15px;
}
form .alert {
display: none;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lt IE 8]>
<p closeass="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class='container'>
<div class="row">
<div class="col-lg-12">
<small>
<p>you can not open this file with browser directly because of JQuery and Bootstrap CDN links</p>
<ul>
<li><b>Use PHP:</b>$ php -S 0.0.0.0:8000 <b> then open </b> http://localhost:8000</li>
<li><b>Use Python2:</b>$ python -m SimpleHTTPServer <b> then open </b> http://localhost:8000</li>
<li><b>Use Python3:</b>$ python -m http.server 8000 <b> then open </b> http://localhost:8000</li>
<li>Or use any HTTP server that you want (Just copy the file somewhere)</li>
</ul>
</small>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="well">
<!-- sample form1 -->
<form>
<feildset>
<div class="form-group">
<label class="control-label">Email:</label>
<input data-title="Please use valid Email address" name="email" class="form-control" data-require="" placeholder="Subscriber email" data-regex="email" />
</div>
<div class="form-group">
<label class="control-label">Gender:</label>
<select data-title="Please select gender" name="gender" class="form-control" required>
<option value="">Choose</option>
<option value="mail">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Password:</label>
<input data-title="Please enter valid password" required name="name" class="form-control" placeholder="Subscriber name" />
</div>
<div class="alert alert-danger">
</div>
<div class="form-group text-center">
<button class="btn btn-default" type="submit">Submit</button>
</div>
</feildset>
</form>
</div>
</div>
<div class="col-md-3">
<div class="well">
<!-- sample form2 -->
<form>
<feildset>
<div class="form-group" style="margin: 0">
<div class="checkbox">
<label>
<!-- we use 'data-required' not 'required' for checkbox, beacuse in non-script mode, browser force user to check them all -->
<input data-title="Select First, Second or Third" data-required='' name="item" type="checkbox" value="1" />First
</label>
</div>
</div>
<div class="form-group" style="margin: 0">
<div class="checkbox">
<label>
<input data-required='' name="item" type="checkbox" value="2" />Second
</label>
</div>
</div>
<div class="form-group" style="margin: 0">
<div class="checkbox">
<label>
<input data-required='' name="item" type="checkbox" value="3" />Third
</label>
</div>
</div>
<div class="form-group">
<label class="control-label">Name:</label>
<input data-title="Please enter your name" name="email" class="form-control" required placeholder="Your name" data-regex="^(?![0-9]).*?$" />
<!-- ^(?![0-9]).*?$ means should not start with number -->
</div>
<div class="form-group">
<label class="control-label">Date:</label>
<input data-title="Please enter your name" name="date" class="form-control" required placeholder="Date plz!" type="date" />
</div>
<div class="alert alert-danger">
</div>
<div class="form-group text-center">
<button class="btn btn-default" type="submit">Submit</button>
</div>
</feildset>
</form>
</div>
</div>
<div class="col-md-3">
<div class="well">
<!-- sample form3 -->
<form>
<feildset>
<div class="form-group">
<label class="control-label">Zip code:</label>
<input data-title="Should be numeric with at least 6 number" name="zip" class="form-control" required data-regex="^[0-9]{6,20}$" />
</div>
<div class="alert alert-danger">
</div>
<div class="form-group text-center">
<button class="btn btn-default" type="submit">Submit</button>
</div>
</feildset>
</form>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="bootstrap.validator.js"></script>
<script>
$('form').bootstrap3Validate(function(e, data) {
e.preventDefault();
alert(JSON.stringify(data));
});
</script>
</body>
</html>