{{> off-canvi}}
<div class="docs-off-canvas-content off-canvas-content" data-off-canvas-content>
- <div class="docs-sticky-top-bar">
+ <div class="docs-sticky-top-bar" data-off-canvas-sticky>
<!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/university/foundation-intro" class="docs-banner course-banner">
+ <!-- <a href="https://zurb.com/university/foundation-intro" class="docs-banner course-banner">
<div class="info">
<h5 class=""><strong>To master everything new in 6.4, along with the rest of Foundation register for our August 8th Webinar Class ›</strong></h5>
</div>
</form>
```
+ ## Required Radio & Checkbox
+
+ If you add `required` to a radio or checkbox input the whole group gets considered as required. This means at least one of the inputs must be checked.
+ Checkbox inputs support the additional attribute `data-min-required` what lets you specify how many checkboxes in the group must be checked (default is one).
+
+
+ ```html_example
+ <form data-abide novalidate>
+ <div class="grid-x grid-margin-x align-bottom">
+ <div class="cell medium-6 large-4">
+ <fieldset>
+ <legend>Radio Group</legend>
+ <input type="radio" name="exampleRadio" id="exampleRadioA" value="A">
+ <label for="exampleRadioA">A</label>
+ <input required type="radio" name="exampleRadio" id="exampleRadioB" value="B">
+ <label for="exampleRadioB">B</label>
+ <input type="radio" name="exampleRadio" id="exampleRadioC" value="C">
+ <label for="exampleRadioC">C</label>
+ </fieldset>
+ </div>
+ <div class="cell medium-6 large-4">
+ <fieldset>
+ <legend>Checkbox Group</legend>
+ <input data-min-required="2" type="checkbox" name="exampleCheckbox" id="exampleCheckboxA" value="A">
+ <label for="exampleCheckboxA">A</label>
+ <input required type="checkbox" name="exampleCheckbox" id="exampleCheckboxB" value="B">
+ <label for="exampleCheckboxB">B</label>
+ <input type="checkbox" name="exampleCheckbox" id="exampleCheckboxC" value="C">
+ <label for="exampleCheckboxC">C</label>
+ </fieldset>
+ </div>
+ <div class="cell large-4">
+ <button class="button" type="submit">Submit</button>
+ </div>
+ </div>
+ </form>
+ ```
+
+ ---
+
## Event Listener
Setup event listener after foundation is initialized (especially for formvalid/forminvalid). Easier to chain via document selector.
-* valid.zf.abide and invalid.zf.abide are field level events, triggered in validateInput function
- * ev.target is the DOM field element,
+* valid.zf.abide and invalid.zf.abide are field level events, triggered in validateInput function
+ * ev.target is the DOM field element,
* elem is jQuery selector for field element
* formvalid.zf.abide and forminvalid.zf.abide are form events, triggered in validateForm function
- * ev.target is the DOM form element,
+ * ev.target is the DOM form element,
* frm is jQuery selector for form element
```javascript
```html
<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
<li>
- <a href="https://get.foundation/">Zurb Foundation</a>
- <a href="http://foundation.zurb.com/" target="_blank">Link here, dropdown there →</a>
++ <a href="https://get.foundation/" target="_blank">Link here, dropdown there →</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
</ul>
```
- <ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true" style="max-width: 250px">
+ <ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true" style="max-width: 300px">
<li>
- <a href="https://get.foundation/">Zurb Foundation</a>
- <a href="http://foundation.zurb.com/" target="_blank">Link here, dropdown there →</a>
++ <a href="http://get.foundation/" target="_blank">Link here, dropdown there →</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
The `.collapse` class lets you remove column gutters (padding).
- There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.
+ There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows gutters at small and medium and no gutters on large and up.
<div class="docs-codepen-container">
-<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/xdWKqa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+<a class="codepen-logo-link" href="http
s://codepen.io/ZURBFoundation/pen/xdWKqa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
"integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=",
"dev": true
},
- "agent-base": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
- "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
- "dev": true,
- "requires": {
- "es6-promisify": "^5.0.0"
- }
- },
"ajv": {
- "version": "6.7.0",
- "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.7.0.tgz",
- "integrity": "sha512-RZXPviBTtfmtka9n9sy1N5M5b82CbxWIR6HIis4s3WQTXDJamc/0gpCWNGz6EWdWp4DOfjzJfhz/AS9zVPjjWg==",
+ "version": "6.10.2",
+ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
+ "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
"dev": true,
"requires": {
"fast-deep-equal": "^2.0.1",
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
- "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
- "dev": true
+ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
"fsevents": {
- "version": "1.2.7",
- "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.7.tgz",
- "integrity": "sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==",
+ "version": "1.2.9",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
+ "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
"dev": true,
"optional": true,
"requires": {
"progress": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
- "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
- "dev": true
+ "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
},
- "promise": {
- "version": "7.3.1",
- "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
- "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
- "dev": true,
- "requires": {
- "asap": "~2.0.3"
- }
- },
"promise-inflight": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
- "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
- "dev": true
+ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
"write": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
- "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
+ "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
"dev": true,
"requires": {
"mkdirp": "^0.5.1"
projects / thirdparty / foundation / foundation-sites.git / commitdiff
