<p>Form validation requires passing in a validation object with the rules required to validate your form.</p>
<div class="ui ignored info message">
<i class="help icon"></i>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.
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.
</div>
<div class="ignore code">
$('.ui.form')
@ -84,7 +85,7 @@ type : 'UI Behavior'
})
;
</div>
<div class="ui form segment">
<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
@ -120,7 +121,7 @@ type : 'UI Behavior'
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
</form>
<div class="no example">
<h4 class="ui header">
@ -129,7 +130,7 @@ type : 'UI Behavior'
<p>Validation rules are a set of conditions required to validate a field</p>
<div class="ui info message">Validation rules are found in <code>$.fn.form.settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
<div class="in red message">To pass parameters to a rule, use bracket notation in your settings object. For example <code>type: 'not[dog]'</code></div>
Calling <code>$('form').form('reset')</code>, or clicking any reset element will return all form values to their <em>default value</em>. This is the value the form fields were set to when the page loaded.
</p>
<p>Calling <code>$('form').form('clear')</code> will remove all values from form fields and reset dropdowns to placeholder text</p>
<div class="ui ignored info message">
Reset and clear will modify all form fields, not just those which have validation rules
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui clear button">Clear</div>
</form>
</div>
<div class="get no example">
<h4 class="ui header">Getting Values</h4>
<p>
You can also read values from form fields using <code>get value</code> and <code>get values</code>
</p>
<div class="ui ignored info message">
Although <code>get values</code> allows you to use any matching identifier, returned values will always use the corresponding <code>name</code> attribute of the element.
<p>Forms that contain a <a href="/collections/message.html">ui message</a> error block will automatically be filled in with form validation information.</p>
<div class="ui ignored info message">The template for error messages can be modified by adjusting settings.template.error</div>
<div class="ui form segment">
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
@ -328,7 +519,7 @@ type : 'UI Behavior'
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui error message"></div>
</div>
</form>
</div>
<div class="inline example">
@ -343,7 +534,7 @@ type : 'UI Behavior'
})
;
</div>
<div class="ui form segment">
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
@ -370,7 +561,7 @@ type : 'UI Behavior'
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</form>
</div>
<div class="dog example">
@ -399,15 +590,18 @@ type : 'UI Behavior'
})
;
</div>
<div class="ui form segment">
<form class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="field">
<label>Dog</label>
<input placeholder="Dog" name="dog" type="text">
</div>
<div class="ui blue submit button">Add Dog <i class="add icon"></i></div>
<div class="ui blue submit button">
<i class="add icon"></i>
Add Dog
</div>
<div class="ui error message"></div>
</div>
</form>
</div>
</div>
@ -438,6 +632,22 @@ type : 'UI Behavior'
<td>get field(id)</td>
<td>Returns element with matching name, id, or data-validate metadata to ID</td>
</tr>
<tr>
<td>get value(id)</td>
<td>Returns value of element with id</td>
</tr>
<tr>
<td>get values(ids)</td>
<td>Returns object of element values that match array of ids. If no IDS are passed will return all fields</td>
</tr>
<tr>
<td>set value(id)</td>
<td>Sets value of element with id</td>
</tr>
<tr>
<td>set values(values)</td>
<td>Sets key/value pairs from passed values object to matching ids</td>
</tr>
<tr>
<td>get validation(element)</td>
<td>Returns validation rules for a given field</td>
<p>Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint.</p>
<p>Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.</p>
<p>Semantic includes two common patterns for adjusting grids on different devices.</p>
<p>A <b>Doubling</b> grid automatically doubles its column width on each device jump. For example, four column computer grid, will jump to a two column grid on tablet, and one column on mobile.</p>
<p>A <code>doubling</code> grid automatically adjusts column width on each device jump. Usually this relationship is an exact doubling of columns, however some adjustments have been made for desplay flexibility. For example, six column computer grid, will jump to a three column grid on tablet, and a two column on mobile.</p>
<p>A <code>stackable</code> grid will always force a layout to use one column on mobile. These two patterns can also be used together to, for example, force a four column grid to one on mobile.</p>
<p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p>
<div class="ignored info ui message">Page headings use standard <code>h1-h6</code> tags, and size themselves relative to the base font of the entire page.</div>
Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <code><i></code> which allow for an abbreviated markup when sitting along-side text.
</div>
<div class="ui ignored message">Semantic includes a complete port of <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> designed by <a href="http://www.twitter.com/davegandy">Dave Gandy</a> for its standard icon set.</div>
<div class="ui ignored message">Semantic includes a complete port of <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome 4.3</a> designed by <a href="http://www.twitter.com/davegandy">Dave Gandy</a> for its standard icon set.</div>
<div class="icon example">
<h4 class="ui header">Web Content</h4>
<p>Icons can represent types of content found on websites</p>
<p>A label can position itself in the corner of an element</p>
<div class="yellow ui message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly</div>
<div class="yellow ui message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly. If a container is rounded you will need to add <code>overflow:hidden</code> to the container to produce a rounded label.</div>
<div class="ui left floated medium image">
<a class="ui corner label">
<i class="save icon"></i>
@ -161,7 +161,6 @@ themes : ['Default']
<h4 class="ui header">Attached</h4>
<p>A label can attach to a content segment</p>
<div class="ui ignored warning message">
<h3 class="ui header">Attached label padding</h3>
<p>Attached labels attempt to intelligently pad other content to account for their position, but may not in all cases apply this padding correctly.</p>
<p>If this happens you may need to manually correct the padding of the other elements inside the container.
<p>Semantic is <b>designed complely with em</b> making reponsive sizing a breeze. Design <em>variations</em> built into elements allow you to make the choice how content adjusts for tablet and mobile.</p>
<p>Semantic is <b>designed completely with em</b> making reponsive sizing a breeze. Design <em>variations</em> built into elements allow you to make the choice how content adjusts for tablet and mobile.</p>
<p>You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder</p>
<p>Keep in mind however, if you initialize a dropdown directly on a select element, the dropdown contents will be hidden until javascript can render the element, causing a flash of unstyled content.</p>
<p>You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder</p>
<p>Keep in mind however, if you initialize a dropdown directly on a select element, the dropdown contents will be hidden until javascript can render the element, causing a flash of unstyled content.</p>
</div>
<select class="ui dropdown">
<option value="">Gender</option>
<option value="1">Male</option>
@ -1550,7 +1550,14 @@ themes : ['Default']
<span class="text">Dogs</span>
<div class="menu">
<div class="item">Shiba Inu</div>
<div class="item">Poodle</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Poodle</span>
<div class="menu">
<div class="item">Toy</div>
<div class="item">Standard</div>
</div>
</div>
<div class="item">Labrador</div>
</div>
</div>
@ -1566,16 +1573,45 @@ themes : ['Default']
</div>
</div>
</div>
<div class="clear dropdown example">
<h4 class="ui header">Clearing Dropdown</h4>
<p>You can reset a form field to its placeholder value</p>
<p>A dropdown will automatically select on page load any menu item that includes the currently value of <code>text</code> or your dropdown's <code>hidden input</code> value.</p>
<p>A dropdown will automatically select on page load any menu item that includes the current value of <code>text</code> or your dropdown's <code>hidden input</code> value.</p>
<p>This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>
</div>
</div>
@ -2141,6 +2177,10 @@ themes : ['Default']
<td>hide</td>
<td>Hides dropdown</td>
</tr>
<tr>
<td>clear</td>
<td>Clears </td>
</tr>
<tr>
<td>hide others</td>
<td>Hides all other dropdowns that is not current dropdown</td>
@ -2171,7 +2211,7 @@ themes : ['Default']
</tr>
<tr>
<td>set value(value)</td>
<td>Sets dropdown input to value</td>
<td>Sets dropdown input to value (does not update display state)</td>
</tr>
<tr>
<td>get text</td>
@ -2302,6 +2342,11 @@ themes : ['Default']
<td>false</td>
<td>Whether menu items with sub-menus (categories) should be selectable</td>
</tr>
<tr>
<td>forceSelection</td>
<td>true</td>
<td>Whether search selection will force currently selected choice when element is blurred.</td>
<td>Can specify a DOM element that should be used as the popup. This is useful for including a pre-formatted popup.</td>
</tr>
<tr>
<td>movePopup</td>
<td>true</td>
<td>Whether to move popup to same offset container as target element when <code>popup</code> is specified in settings. Using a popup inside of an element without <code>overflow:visible</code>, like a sidebar, may require you to set this to <code>false</code></td>
<p>A search can look for results inside static local content.</p>
<div class="ui ignored info message">
By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search modify the <code>searchFullText</code> setting.
By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search you can specify in settings <code>searchFullText: false</code>.
</div>
<div class="ui search">
<div class="ui icon input">
@ -79,23 +79,30 @@ type : 'UI Module'
</div>
<div class="hidden code" data-type="javascript">
var content = [
{ title: 'Andorrs' },
{ title: 'Andorra' },
{ title: 'United Arab Emirates' },
{ title: 'Afghanistas' },
{ title: 'Antigus' },
{ title: 'Anguills' },
{ title: 'Albanis' },
{ title: 'Armenis' },
{ title: 'Afghanistan' },
{ title: 'Antigua' },
{ title: 'Anguilla' },
{ title: 'Albania' },
{ title: 'Armenia' },
{ title: 'Netherlands Antilles' },
{ title: 'Angols' },
{ title: 'Argentins' },
{ title: 'American Samos' },
{ title: 'Austris' },
{ title: 'Australis' },
{ title: 'Arubs' },
{ title: 'Angola' },
{ title: 'Argentina' },
{ title: 'American Samoa' },
{ title: 'Austria' },
{ title: 'Australia' },
{ title: 'Aruba' },
{ title: 'Aland Islands' },
{ title: 'Azerbaijas' },
{ title: 'Bosnis' }
{ title: 'Azerbaijan' },
{ title: 'Bosnia' },
{ title: 'Barbados' },
{ title: 'Bangladesh' },
{ title: 'Belgium' },
{ title: 'Burkina Faso' },
{ title: 'Bulgaria' },
{ title: 'Bahrain' },
{ title: 'Burundi' }
// etc
];
</div>
@ -156,7 +163,7 @@ type : 'UI Module'
</div>
<h4 class="ui header">Automatic Routing</h4>
<p>By default search will automatically route to the named API endpoint 'search'</p>
<p>By default search will automatically route to the named <a href="/behaviors/api.html">API endpoint</a> 'search'</p>
<div class="code" data-label="javascript">
// initializes with default endpoint /search/{query}
$('.ui.search')
@ -283,9 +290,6 @@ type : 'UI Module'
<h2 class="ui dividing header">Behaviors</h2>
<h2 class="ui dividing header">Behavior</h2>
<p>All the following behaviors can be called using the syntax:</p>
<div class="code">
$('.your.element')
@ -308,8 +312,8 @@ type : 'UI Module'
<td>Displays message in search results with text, using template matching type</td>
</tr>
<tr>
<td>cancel search</td>
<td>Cancels current search</td>
<td>cancel query</td>
<td>Cancels current remote search query</td>
</tr>
<tr>
<td>search local(query)</td>
@ -319,16 +323,44 @@ type : 'UI Module'
<td>search remote(query)</td>
<td>Search remote endpoint for specified query and display results</td>
</tr>
<tr>
<td>search object(query, object)</td>
<td>Search object for specified query and return results</td>
<td>Callback on element selection by user (overrides default action)</td>
<td>Callback on element selection by user. The first parameter includes the filtered response results for that element. The function should return false to prevent default action (closing search results and selecting value).</td>
</tr>
<tr>
<td>onResultsAdd(html)</td>
<td>module</td>
<td>Callback after processing element template to add html to results (overrides default action)</td>
<td>Callback after processing element template to add html to results. Function should return false to prevent default actions.</td>
</tr>
<tr>
<td>onSearchQuery</td>
@ -542,10 +574,10 @@ type : 'UI Module'
<div class="code">
className: {
active : 'active',
down : 'down',
focus : 'focus',
empty : 'empty',
loading : 'loading'
focus : 'focus',
loading : 'loading',
pressed : 'down'
}
</div>
</td>
@ -571,13 +603,14 @@ type : 'UI Module'
<td colspan="2">
<div class="code">
error : {
source : 'No source or api action specified',
source : 'Cannot search. No source used, and Semantic API module was not included',
noResults : 'Your search returned no results',
logging : 'Error in debug logging, exiting.',
noTemplate : 'A valid template name was not specified.',
serverError : 'There was an issue with querying the server.',
maxResults : 'Results must be an array to use maxResults setting',
<p>We need your help to make Semantic available to people who speak your language.</p>
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <ahref="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
</p>
</div>
</div>
@ -22,4 +22,25 @@
Help Translate
</a>
</div>
</div>
<divclass="ui basic chinese modal">
<iclass="close icon"></i>
<divclass="header">Would you like to visit the mirror site?</div>
<divclass="content">
<divclass="middle aligned image">
<iclass="question icon"></i>
</div>
<divclass="description">
<p>Semantic is available at <ahref="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
</p>
</div>
</div>
<divclass="actions">
<divclass="ui inverted red cancel button">No Thanks</div>
<ahref="http://www.semantic-ui.cn"class="ui inverted green approve button">
jlukic
10 years ago
