Skip to content

Commit 2484310

Browse files
jlukicjlukic
committed
Add new form docs
1 parent 3034d0d commit 2484310

2 files changed

Lines changed: 117 additions & 12 deletions

File tree

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

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,51 @@ type : 'UI Behavior'
282282
</form>
283283
</div>
284284

285+
<div class="prompt example">
286+
<h4 class="ui header">
287+
Validating Programmatically
288+
<div class="ui teal label">Updated in 2.2.8</div>
289+
</h4>
290+
<p>Form validation provides additional behaviors to programmatically trigger validation for either the form or an individual field, and check validation on the form or individual fields.</p>
291+
<p>Please see the <a href="#behaviors">behaviors section</a> for an explanation on syntax.</p>
292+
<table class="ui celled sortable basic table segment">
293+
<tbody>
294+
<tr>
295+
<td class="four wide"><b>validate form</b></td>
296+
<td>Validates entire form and displays errors if necessary</td>
297+
</tr>
298+
<tr>
299+
<td class="four wide"><b>is valid</b></td>
300+
<td>Returns whether a form is valid</td>
301+
</tr>
302+
<tr>
303+
<td class="four wide"><b>is valid(fieldName)</b></td>
304+
<td>Returns whether a field in a form is valid (does not update UI)</td>
305+
</tr>
306+
<tr>
307+
<td class="four wide"><b>validate field(fieldName)</b></td>
308+
<td>Validates a particular field and displays errors if necessary</td>
309+
</tr>
310+
</tbody>
311+
</table>
312+
<div class="ignored code">
313+
$('.ui.form')
314+
.form({
315+
fields: [
316+
email: 'empty',
317+
name: 'empty'
318+
]
319+
})
320+
;
321+
if( $('.ui.form').form('is valid', 'email')) {
322+
// email is valid
323+
}
324+
if( $('.ui.form').form('is valid') {
325+
// form is valid (both email and name)
326+
}
327+
</div>
328+
</div>
329+
285330
<h2 class="ui dividing header">Rules</h2>
286331

287332
<div class="no example">
@@ -838,7 +883,7 @@ type : 'UI Behavior'
838883
</div>
839884
<div class="field">
840885
<label>E-mail</label>
841-
<input name="email" type="text" value="jack@foo">
886+
<input name="email" type="text" value="jack">
842887
</div>
843888
</div>
844889
<div class="two fields">
@@ -1696,7 +1741,7 @@ type : 'UI Behavior'
16961741
</div>
16971742

16981743
<div class="ui tab" data-tab="settings">
1699-
<h2 class="ui dividing header">Behavior</h2>
1744+
<h2 class="ui dividing header">Behaviors</h2>
17001745

17011746
All the following behaviors can be called using the syntax
17021747

@@ -1713,13 +1758,17 @@ type : 'UI Behavior'
17131758
<td>is valid</td>
17141759
<td>Returns true/false whether a form passes its validation rules</td>
17151760
</tr>
1761+
<tr>
1762+
<td>is valid(fieldName)</td>
1763+
<td>Returns true/false whether a field passes its validation rules</td>
1764+
</tr>
17161765
<tr>
17171766
<td>validate form</td>
1718-
<td>Validates form and calls onSuccess or onFailure</td>
1767+
<td>Validates form, updates UI, and calls onSuccess or onFailure</td>
17191768
</tr>
17201769
<tr>
1721-
<td>get change event</td>
1722-
<td>gets browser property change event</td>
1770+
<td>validate field(fieldName)</td>
1771+
<td>Validates field, updates UI, and calls onSuccess or onFailure</td>
17231772
</tr>
17241773
<tr>
17251774
<td>get field(id)</td>

‎server/documents/hotfix.html.eco‎

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,73 @@ type : 'Library'
7171
</div>
7272
</div> -->
7373
<div class="ui container">
74-
<div class="ui vertical inverted very padded segment">
75-
<div class="ui vertical inverted very padded segment">
76-
<div class="ui vertical inverted very padded segment">
77-
Lorem...
74+
<form class="ui form segment">
75+
<p>Tell Us About Yourself</p>
76+
<div class="two fields">
77+
<div class="field">
78+
<label>Name</label>
79+
<input placeholder="First Name" name="name" type="text">
80+
</div>
81+
<div class="field">
82+
<label>Gender</label>
83+
<select class="ui dropdown" name="gender">
84+
<option value="">Gender</option>
85+
<option value="male">Male</option>
86+
<option value="female">Female</option>
87+
</select>
88+
</div>
7889
</div>
79-
</div>
80-
</div>
90+
<div class="two fields">
91+
<div class="field">
92+
<label>Username</label>
93+
<input placeholder="Username" name="username" type="text">
94+
</div>
95+
<div class="field">
96+
<label>Password</label>
97+
<input type="password" name="password">
98+
</div>
99+
</div>
100+
<div class="field">
101+
<label>Skills</label>
102+
<select name="skills" multiple class="ui dropdown">
103+
<option value="">Select Skills</option>
104+
<option value="css">CSS</option>
105+
<option value="html">HTML</option>
106+
<option value="javascript">Javascript</option>
107+
<option value="design">Graphic Design</option>
108+
<option value="plumbing">Plumbing</option>
109+
<option value="mech">Mechanical Engineering</option>
110+
<option value="repair">Kitchen Repair</option>
111+
</select>
112+
</div>
113+
<div class="inline field">
114+
<div class="ui checkbox">
115+
<input type="checkbox" name="terms" />
116+
<label>I agree to the terms and conditions</label>
117+
</div>
118+
</div>
119+
<div class="ui primary submit button">Submit</div>
120+
<div class="ui error message"></div>
121+
</div>
122+
</form>
81123
</div>
82124
<script>
83125
$(document).ready(function() {
84-
$('.ui.modal').modal('show');
126+
$('.ui.dropdown').dropdown();
127+
$('.ui.form')
128+
.form({
129+
fields: {
130+
name : 'empty',
131+
gender : 'empty',
132+
username : 'empty',
133+
password : ['minLength[6]', 'empty'],
134+
skills : ['minCount[2]', 'empty'],
135+
terms : 'checked'
136+
}
137+
})
138+
;
139+
// $('.ui.form').form('validate field', 'username');
140+
console.log($('.ui.form').form('is valid', 'username'));
85141
});
86142

87143
</script>

0 commit comments

Comments
 (0)