forked from mustardamus/ketchup-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyourway.html
171 lines (158 loc) · 7.54 KB
/
yourway.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ketchup Plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.en.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<ul id="toc">
<li><a href="index.html#what">What is the Ketchup Plugin about?</a></li>
<li><a href="index.html#basic">Ketchup right out of the box. Basic validations.</a></li>
<li><a href="yourway.html">Have it your way. Error-Container styling and behaviour.</a></li>
<li><a href="validation.html">You need to validate in a different way? Make your own Ketchup!</a></li>
<li><a href="support.html">Download, Support and Bug reports.</a></li>
</ul>
<div id="wrapper">
<h1 id="style">Have it your way. Error-Container styling and behaviour.</h1>
<p>
Ketchup provides some callbacks to completely control the markup and show/hide behaviour of the error-container, which simply can be styled via CSS.
Lets check out these callbacks and create an alternative Ketchup.
</p>
<h2>Example Form</h2>
<pre><code><form action="index.html" id="example2">
<div>
<label for="ex2_username">Username</label>
<input type="text" id="ex2_username" <span>rel="validate(required,username,rangelength(5,20))"</span> />
</div>
<div>
<label for="ex2_email">E-Mail</label>
<input type="text" id="ex2_email" <span>rel="validate(required,email)"</span> />
</div>
<div class="submit">
<input type="Submit" value="(Try to) Submit" />
</div>
</form></code></pre>
<h2>Alternative Attribute for the validate() functions</h2>
<p>
You may have noticed that we put the <code>validate()</code> functions not in the <code>class</code> but the <code>rel</code> attribute.
Tell Ketchup where to look for <code>validate()</code> functions via the <code>validationAttribute</code> parameter:
</p>
<pre><code>$('#example2').ketchup({
<span>validationAttribute: 'rel'</span>
});</code></pre>
<h2>Your own error-container markup</h2>
<p>
Ketchup don't force any markup on you. Build your own error-container, either with HTML code in a
string or the <a href="http://jqapi.com/#p=jQuery">element builder</a> as shown in the example via the <code>errorContainer</code> parameter:
</p>
<p>
<strong>Important:</strong> Your error-container <u>must</u> contain an empty ordered list somewhere (<code><ol></ol></code>).
Validation errors will be inserted there.
</p>
<pre><code>$('#example2').ketchup({
validationAttribute: 'rel',
<span>errorContainer: $('<div>', {
'class': 'ketchup-error-container-alt',
html: '<ol></ol>'
})</span>
});</code></pre>
<h2>Set initial position for your error-container</h2>
<p>
You can position your error-container initially when the DOM is loaded. This is good if you want to have an overlay effect like in the default
behaviour. In this example we want to display validation errors below the text fields. The <code>initialPositionContainer</code>
callback gives you <code>errorContainer</code> and <code>field</code> arguments to work with. In this example we don't need to position our
error-container so we overwrite this callback with an empty function:
</p>
<pre><code>$('#example2').ketchup({
validationAttribute: 'rel',
errorContainer: $('<div>', {
'class': 'ketchup-error-container-alt',
html: '<ol></ol>'
}),
<span>initialPositionContainer: function(errorContainer, field) {
//errorContainer = the error-container with all childs
//field = the field that needs to get validated
}</span>
});</code></pre>
<h2>Re-set the error-container position</h2>
<p>
You also can re-set the error-container when the number of validation errors change. This is done via the <code>positionContainer</code>
callback. Again this callback provides the <code>errorContainer</code> and <code>field</code> arguments. Our example always appears under
the field to validate, so we do not want to re-set the error-container position so we call an empty function again:
</p>
<pre><code>$('#example2').ketchup({
validationAttribute: 'rel',
errorContainer: $('<div>', {
'class': 'ketchup-error-container-alt',
html: '<ol></ol>'
}),
initialPositionContainer: function(errorContainer, field) {
//errorContainer = the error-container with all childs
//field = the field that needs to get validated
},
<span>positionContainer: function(errorContainer, field) {}</span>
});</code></pre>
<h2>Show and hide the error-container</h2>
<p>
The <code>showContainer</code> and <code>hideContainer</code> callbacks gives you control how the error-container is shown when validation errors
occur and how to hide when there are no validation errors. In our example we use <a href="http://jqapi.com/#p=slideDown"><code>slideDown</code></a>
when there are validation errors and <a href="http://jqapi.com/#p=slideUp"><code>slideUp</code></a> when everything is OK:
</p>
<pre><code>$('#example2').ketchup({
validationAttribute: 'rel',
errorContainer: $('<div>', {
'class': 'ketchup-error-container-alt',
html: '<ol></ol>'
}),
initialPositionContainer: function(errorContainer, field) {
//errorContainer = the error-container with all childs
//field = the field that needs to get validated
},
positionContainer: function(errorContainer, field) {},
<span>showContainer: function(errorContainer) {
errorContainer.slideDown('fast');
},
hideContainer: function(errorContainer) {
errorContainer.slideUp('fast');
}</span>
});</code></pre>
<h2>Style your error-container</h2>
<p>
Since you have the control over the error-container markup you also have full control over the styling. This is our example CSS:
</p>
<pre><code>.ketchup-error-container-alt { margin: 10px; width: 510px; display: none; }
.ketchup-error-container-alt li {
background: #F04D5B;
color: black;
padding: 3px 10px 3px 10px;
font-size: 11px;
margin-bottom: 3px;
boder-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}</code></pre>
<h2>Outcome (Try to submit the form)</h2>
<form action="yourway.html" id="example2">
<div>
<label for="ex2_username">Username</label>
<input type="text" id="ex2_username" rel="validate(required,username,rangelength(5,20))" />
</div>
<div>
<label for="ex2_email">E-Mail</label>
<input type="text" id="ex2_email" rel="validate(required,email)" />
</div>
<div class="submit">
<input type="Submit" value="(Try to) Submit" />
</div>
</form>
</div>
</body>
</html>