-
Notifications
You must be signed in to change notification settings - Fork 1
/
one form.html
134 lines (116 loc) · 5.13 KB
/
one form.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Milax Validation by Eugene Kuzmin</title>
<link rel="stylesheet" href="css/base.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery.milax.validation.js"></script>
<script src="js/base.js"></script>
</head>
<body>
<p><a href="index.html">«Back</a></p>
<form action="http://ya.ru">
<section id="wrapper" role="main">
<h1>Form validation plugin [one form]</h1>
<!-- FIRST EXAMPLE -->
<fieldset>
<h2>First example</h2>
<dl class="formFields first">
<dt>
<label>Name: </label>
</dt>
<dd>
<input type="text" name="yourName" data-mx class="mxValidate mxRequired">
<span class="mxError mxRequired">This field is required</span>
</dd>
<dd class="divider"></dd>
<dt>
<label>Email: </label>
</dt>
<dd>
<input type="text" name="yourName" class="mxValidate mxRequired mxEmail">
<span class="mxError mxRequired">This field is required</span>
<span class="mxError mxEmail">Wrong email format</span>
</dd>
<dd class="divider"></dd>
<dt>
<label>Field with max width = 3: </label>
</dt>
<dd>
<input type="text" name="yourMax" data-mxvalidate-options='{"max": 10, "min": 3}' class="mxValidate mxRequired mxMax mxMin">
<span class="mxError mxRequired">This field is required</span>
<span class="mxError mxMax">Max length is 10</span>
<span class="mxError mxMin">Min length is 3</span>
</dd>
<dd class="button">
<input class="btnSubmit" type="submit" value="Send">
</dd>
</dl>
</fieldset>
<!-- SECOND EXAMPLE -->
<fieldset>
<h2>Second example</h2>
<dl class="formFields second">
<dt>
<label>Name: </label>
</dt>
<dd>
<input type="text" name="yourName" class="mxValidate mxRequired">
<span class="mxError mxRequired">This field is required</span>
</dd>
<dd class="divider"></dd>
<dt>
<label>Email: </label>
</dt>
<dd>
<input type="text" name="yourName" class="mxValidate mxRequired mxEmail">
<span class="mxError mxRequired">This field is required</span>
<span class="mxError mxEmail">Wrong email format</span>
</dd>
<dt>
One from list is required:
</dt>
<dd>
<ul class="clean mxValidate mxAtLeastOne">
<li>
<label for="firstChk"><input type="checkbox" id="firstChk"> First item</label>
</li>
<li>
<label for="secondChk"><input type="checkbox" id="secondChk"> Second item</label>
</li>
<li>
<label for="thirdChk"><input type="checkbox" id="thirdChk"> Third item</label>
</li>
</ul>
<span class="mxError mxAtLeastOne">At least one item must be checked</span>
</dd>
<dd class="button">
<input class="btnSubmit" type="submit" value="Send">
</dd>
</dl>
</fieldset>
<!-- THIRD EXAMPLE -->
<fieldset>
<h2>Third example (search box)</h2>
<dl class="formFields searchBox">
<dt>
<label>What: </label>
</dt>
<dd>
<input type="text" name="yourWord" class="searchField mxValidate mxRequired">
<span class="mxError mxRequired">This field is required</span>
</dd>
<dd class="button">
<input class="btnSubmit" type="submit" value="Search">
</dd>
</dl>
</fieldset>
</section>
<footer role="contentinfo">
© Eugene Kuzmin 2012
</footer>
</form>
</body>
</html>