-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (69 loc) · 2.7 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Awkward Check - Demo #1</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.aw-check.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
// Init form
aw_check_init( '#form' );
});
</script>
</head>
<body>
<h1 style="text-align: center;">Awkward Check</h1>
<div class="menu"><a href="index.html" class="active">Demo #1</a> (Normal) | <a href="index2.html">Demo #2</a> (Overlay labels) | <a href="index3.html">Demo #3</a> (Custom Validation)</div>
<form id="form" class="form" method="post">
<div class="input-box" data-checkfield="#input-name" data-checkrule="text">
<label>Name</label>
<input type="text" id="input-name" name="input-name" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-email" data-checkrule="email" data-checkerror="Please enter a valid e-mail address">
<label>E-mail</label>
<input type="text" id="input-email" name="input-email" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-number" data-checkrule="phone:empty" data-checkerror="Please enter a valid phone number">
<label>Phone number (optional)</label>
<input type="text" id="input-number" name="input-number" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-address" data-checkrule="text">
<label>Address</label>
<textarea id="input-address" name="input-address" rows="3"></textarea>
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-select" data-checkrule="text">
<label>Validate selects</label>
<select id="input-select">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box check" data-checkfield="#input-check" data-checkrule="check">
<input type="checkbox" id="input-check" name="input-check" />
<label>Check this checkbox (clickable text)</label>
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box">
<input type="submit" name="submit" value="Submit form" onclick="javascript: return aw_check('#form');" />
</div>
</form>
<div style="text-align: center; margin-top: 50px;">
<a href="http://www.awkwardgroup.com/sandbox/awkward-check-a-jquery-plugin">
Click here to download and learn more about this jQuery plugin.
</a>
</div>
</body>
</html>