Skip to content

Commit 96340ca

Browse files
jlukicjlukic
committed
Merge branch 'next' of github.com:Semantic-Org/Semantic-UI-Docs
Conflicts: docpad.coffee
2 parents 762abcb + 7197e9d commit 96340ca

8 files changed

Lines changed: 297 additions & 43 deletions

File tree

‎docpad.coffee‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ docpadConfig = {
2929
# Here are some old site urls that you would like to redirect from
3030
oldUrls: [],
3131

32-
version: "2.1.3",
32+
version: "2.1.4",
3333

3434
branch: "master",
3535

‎server/documents/behaviors/form.html.eco‎

Lines changed: 185 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,33 @@ type : 'UI Behavior'
2424

2525
<h2 class="ui dividing header">Usage</h2>
2626

27-
<div class="example">
28-
<h4 class="ui header">Setting-up Fields</h4>
27+
<div class="auto example">
28+
<h4 class="ui header">Specifying Validation Rules</h4>
2929
<p>Form validation requires passing in a validation object with the rules required to validate your form.</p>
3030
<div class="ui ignored info message">
31-
A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the <code>id</code> tag, <code>name</code> tag, or the <code>data-validate</code> metadata matching the identifier provided in the settings object.
31+
A validation object includes a list of form elements, and rules to validate each field against. Fields are matched by either the <code>id</code>, <code>name</code>, or <code>data-validate</code> property matching the identifier specified in the settings object.
3232
</div>
33-
<div class="ignore code">
33+
<div class="ignore code" data-title="Shorthand Validation">
34+
$('.ui.form')
35+
.form({
36+
fields: {
37+
name : 'empty',
38+
gender : 'empty',
39+
username : 'empty',
40+
password : ['minLength[6]', 'empty'],
41+
skills : ['minCount[2]', 'empty'],
42+
terms : 'checked'
43+
}
44+
})
45+
;
46+
</div>
47+
<div class="ui horizontal divider">or</div>
48+
<div class="ignore code" data-title="Full Validation Settings">
3449
$('.ui.form')
3550
.form({
3651
fields: {
3752
name: {
38-
identifier : 'name',
53+
identifier: 'name',
3954
rules: [
4055
{
4156
type : 'empty',
@@ -44,7 +59,7 @@ type : 'UI Behavior'
4459
]
4560
},
4661
skills: {
47-
identifier : 'skills',
62+
identifier: 'skills',
4863
rules: [
4964
{
5065
type : 'minCount[2]',
@@ -53,7 +68,7 @@ type : 'UI Behavior'
5368
]
5469
},
5570
gender: {
56-
identifier : 'gender',
71+
identifier: 'gender',
5772
rules: [
5873
{
5974
type : 'empty',
@@ -62,7 +77,7 @@ type : 'UI Behavior'
6277
]
6378
},
6479
username: {
65-
identifier : 'username',
80+
identifier: 'username',
6681
rules: [
6782
{
6883
type : 'empty',
@@ -71,20 +86,20 @@ type : 'UI Behavior'
7186
]
7287
},
7388
password: {
74-
identifier : 'password',
89+
identifier: 'password',
7590
rules: [
7691
{
7792
type : 'empty',
7893
prompt : 'Please enter a password'
7994
},
8095
{
8196
type : 'minLength[6]',
82-
prompt : 'Your password must be at least 6 characters'
97+
prompt : 'Your password must be at least {ruleValue} characters'
8398
}
8499
]
85100
},
86101
terms: {
87-
identifier : 'terms',
102+
identifier: 'terms',
88103
rules: [
89104
{
90105
type : 'checked',
@@ -146,6 +161,102 @@ type : 'UI Behavior'
146161
</div>
147162
</form>
148163

164+
<div class="prompt example">
165+
<h4 class="ui header">Customizing Prompts</h4>
166+
<p>Form validation includes default error prompts for most cases, however these can be quite generic. To specify custom personalized values for a validation prompt use the <code>prompt</code> property with a rule.</p>
167+
<div class="ui ignored info message">You can set default messages for each validation rule type by modifying <code>$fn.form.settings.prompt</code></div>
168+
<p>Prompt also supports custom templating with the following values replaced</p>
169+
<table class="ui celled sortable basic table segment">
170+
<tbody>
171+
<tr>
172+
<td class="four wide"><b>{name}</b></td>
173+
<td>The current text of a field's label, or if no label available its placeholder text</td>
174+
</tr>
175+
<tr>
176+
<td class="four wide"><b>{identifier}</b></td>
177+
<td>The identifier used to match the field</td>
178+
</tr>
179+
<tr>
180+
<td class="four wide"><b>{value}</b></td>
181+
<td>The current field value</td>
182+
</tr>
183+
<tr>
184+
<td class="four wide"><b>{ruleValue}</b></td>
185+
<td>The value passed to a rule, for example <code>minLength[100]</code> would set this value to 100</td>
186+
</tr>
187+
</tbody>
188+
</table>
189+
<div class="ignored code">
190+
$('.ui.form')
191+
.form({
192+
fields: {
193+
field1: {
194+
rules: [
195+
{
196+
type : 'empty'
197+
}
198+
]
199+
},
200+
field2: {
201+
rules: [
202+
{
203+
type : 'exactly[dog]',
204+
prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}'
205+
}
206+
]
207+
}
208+
}
209+
})
210+
;
211+
</div>
212+
<form class="ui form segment">
213+
<div class="two fields">
214+
<div class="field">
215+
<label>Field 1</label>
216+
<input type="text" name="field1">
217+
</div>
218+
<div class="field">
219+
<label>Field 2</label>
220+
<input type="text" name="field2">
221+
</div>
222+
</div>
223+
<div class="ui blue submit button">Submit</div>
224+
<div class="ui error message">
225+
</div>
226+
</form>
227+
</div>
228+
229+
<div class="matching example">
230+
<h4 class="ui header">Matching Fields</h4>
231+
<p>By default the property name used in the validation object will match against the <code>id</code>, <code>name</code>, or <code>data-validate</code> property of each input to find the corresponding field to match validation rules against.</p>
232+
<p>If you need to specify a different identifier you can use the <code>identifier</code> property on each validation rule</p>
233+
<div class="ignored code">
234+
$('.ui.form')
235+
.form(
236+
fields: {
237+
name: {
238+
identifier : 'special-name',
239+
rules: [
240+
{
241+
type : 'empty'
242+
}
243+
]
244+
}
245+
}
246+
})
247+
;
248+
</div>
249+
<form class="ui form segment">
250+
<div class="field">
251+
<label>Special Field</label>
252+
<input type="text" name="special-name">
253+
</div>
254+
<div class="ui blue submit button">Submit</div>
255+
<div class="ui error message">
256+
</div>
257+
</form>
258+
</div>
259+
149260
<h2 class="ui dividing header">Rules</h2>
150261

151262
<div class="no example">
@@ -1539,7 +1650,7 @@ type : 'UI Behavior'
15391650
<table class="ui celled sortable definition table">
15401651
<thead>
15411652
<th>Setting</th>
1542-
<th class="four wide">Default</th>
1653+
<th class="six wide">Default</th>
15431654
<th>Description</th>
15441655
</thead>
15451656
<tbody>
@@ -1583,6 +1694,68 @@ type : 'UI Behavior'
15831694
</tbody>
15841695
</table>
15851696
</div>
1697+
1698+
<div class="no example">
1699+
<h4 class="ui header">
1700+
Form Prompts
1701+
</h4>
1702+
<p>Settings to modify default form prompts</p>
1703+
1704+
<table class="ui celled sortable definition table">
1705+
<thead>
1706+
<th class="collapsing">Setting</th>
1707+
<th>Default</th>
1708+
</thead>
1709+
<tbody>
1710+
<tr>
1711+
<td>text</td>
1712+
<td>
1713+
<div class="code">
1714+
text: {
1715+
unspecifiedRule : 'Please enter a valid value',
1716+
unspecifiedField : 'This field'
1717+
}
1718+
</div>
1719+
</td>
1720+
</tr>
1721+
<tr>
1722+
<td>prompt</td>
1723+
<td>
1724+
<div class="code">
1725+
prompt: {
1726+
empty : '{name} must have a value',
1727+
checked : '{name} must be checked',
1728+
email : '{name} must be a valid e-mail',
1729+
url : '{name} must be a valid url',
1730+
regExp : '{name} is not formatted correctly',
1731+
integer : '{name} must be an integer',
1732+
decimal : '{name} must be a decimal number',
1733+
number : '{name} must be set to a number',
1734+
is : '{name} must be \'{ruleValue}\'',
1735+
isExactly : '{name} must be exactly \'{ruleValue}\'',
1736+
not : '{name} cannot be set to \'{ruleValue}\'',
1737+
notExactly : '{name} cannot be set to exactly \'{ruleValue}\'',
1738+
contain : '{name} cannot contain \'{ruleValue}\'',
1739+
containExactly : '{name} cannot contain exactly \'{ruleValue}\'',
1740+
doesntContain : '{name} must contain \'{ruleValue}\'',
1741+
doesntContainExactly : '{name} must contain exactly \'{ruleValue}\'',
1742+
minLength : '{name} must be at least {ruleValue} characters',
1743+
length : '{name} must be at least {ruleValue} characters',
1744+
exactLength : '{name} must be exactly {ruleValue} characters',
1745+
maxLength : '{name} cannot be longer than {ruleValue} characters',
1746+
match : '{name} must match {ruleValue} field',
1747+
different : '{name} must have a different value than {ruleValue} field',
1748+
creditCard : '{name} must be a valid credit card number',
1749+
minCount : '{name} must have at least {ruleValue} choices',
1750+
exactCount : '{name} must have exactly {ruleValue} choices',
1751+
maxCount : '{name} must have {ruleValue} or less choices'
1752+
}
1753+
</div>
1754+
</td>
1755+
</tr>
1756+
</tbody>
1757+
</table>
1758+
</div>
15861759
<div class="no example">
15871760
<h4 class="ui header">
15881761
Callbacks

‎server/documents/collections/form.html.eco‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1100,24 +1100,6 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
11001100

11011101
<h2 class="ui dividing header">Form Variations</h2>
11021102

1103-
<div class="example">
1104-
<h4 class="ui header">Fluid</h4>
1105-
<p>A form can take the width of its container</p>
1106-
<div class="ui fluid form">
1107-
<div class="two fields">
1108-
<div class="field">
1109-
<label>First Name</label>
1110-
<input placeholder="First Name" type="text">
1111-
</div>
1112-
<div class="field">
1113-
<label>Last Name</label>
1114-
<input placeholder="Last Name" type="text">
1115-
</div>
1116-
</div>
1117-
<div class="ui submit button">Submit</div>
1118-
</div>
1119-
</div>
1120-
11211103
<div class="example">
11221104
<h4 class="ui header">Size</h4>
11231105
<p>A form can also be small or large</p>

‎server/documents/elements/icon.html.eco‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1274,6 +1274,9 @@ themes : ['Default']
12741274
<div class="example">
12751275
<h4 class="ui header">Size</h4>
12761276
<p>An icon can vary in size</p>
1277+
<i class="mini home icon"></i>
1278+
<i class="tiny home icon"></i>
1279+
<i class="small home icon"></i>
12771280
<i class="small home icon"></i>
12781281
<br>
12791282
<i class="home icon"></i>

‎server/documents/elements/label.html.eco‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ themes : ['Default', 'GitHub']
7979
</div>
8080
</div>
8181

82-
<div class="example" data-class="pointing above, pointing below, pointing left, pointing right">
82+
<div class="example" data-class="pointing above, pointing below, left pointing, right pointing">
8383
<h4 class="ui header">Pointing</h4>
8484
<p>A label can point to content next to it</p>
8585
<form class="ui fluid form">
@@ -99,13 +99,13 @@ themes : ['Default', 'GitHub']
9999
<div class="ui divider"></div>
100100
<div class="inline field">
101101
<input type="text" placeholder="Username">
102-
<div class="ui pointing left label">
102+
<div class="ui left pointing label">
103103
That name is taken!
104104
</div>
105105
</div>
106106
<div class="ui divider"></div>
107107
<div class="inline field">
108-
<div class="ui pointing right label">
108+
<div class="ui right pointing label">
109109
Your password must be 6 characters or more
110110
</div>
111111
<input type="password">
@@ -131,13 +131,13 @@ themes : ['Default', 'GitHub']
131131
<div class="ui divider"></div>
132132
<div class="inline field">
133133
<input type="text" placeholder="Username">
134-
<div class="ui pointing left red basic label">
134+
<div class="ui left pointing red basic label">
135135
That name is taken!
136136
</div>
137137
</div>
138138
<div class="ui divider"></div>
139139
<div class="inline field">
140-
<div class="ui pointing right red basic label">
140+
<div class="ui right pointing red basic label">
141141
Your password must be 6 characters or more
142142
</div>
143143
<input type="password">

‎server/documents/hotfix.html.eco‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
layout : 'blank'
3+
css : 'hotfix'
4+
standalone : true
5+
6+
title : 'Test Page'
7+
type : 'Library'
8+
---
9+
10+
<div class="ui container">
11+
12+
<select class="ui search dropdown">
13+
<%- @partial('examples/single/state-options') %>
14+
</select>
15+
<div class="ui button">Button</div>
16+
</body>
17+
<!-- TEST JS HERE !-->
18+
<script>
19+
$(document)
20+
.ready(function(){
21+
22+
$('.ui.dropdown')
23+
.dropdown({
24+
allowAdditions: true
25+
})
26+
;
27+
$('.ui.button')
28+
.on('click', function() {
29+
$('.ui.dropdown').dropdown('set selected', 'VA');
30+
})
31+
;
32+
})
33+
;
34+
</script>
35+
36+
<!-- TEST CSS HERE !-->
37+
<style type="text/css">
38+
body > .ui.container:first-child {
39+
margin-top: 5em;
40+
}
41+
</style>

0 commit comments

Comments
 (0)