updated README.md with checkbox field options
This commit is contained in:
36
README.md
36
README.md
@ -80,26 +80,30 @@ state.
|
||||
</div>
|
||||
```
|
||||
|
||||
### Checkbox and Radio Fields
|
||||
### Checkbox and Radio Fields {#checkbox-and-radio-fields}
|
||||
|
||||
- Wrap all options in a `<fieldset>` element and add the `form-group` class to
|
||||
it instead of the individual options.
|
||||
- The `<legend>` tag may be used to give the option set a heading.
|
||||
- Each `checkbox` or `radio` `<input>` type should be wrapped in a
|
||||
`form-group__item` class. This class is not used programattically, and is only
|
||||
used for styling.
|
||||
- [Field Options](#field-options) are shared amongst all inputs in a check or
|
||||
radio group. Your options only need to be applied to one of the inputs in the
|
||||
group that shares a `name` attribute.
|
||||
|
||||
```html
|
||||
<fieldset class="form-group">
|
||||
<legend>Check Group</legend>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-1" type="checkbox" name="checks">
|
||||
<input data-validation='{"minChecks": 2, "optional": true}' id="checkbox-1" type="checkbox" name="checks">
|
||||
<label for="checkbox-1">Checkbox 1</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-2" type="checkbox" name="checks">
|
||||
<label for="checkbox-2">Checkbox 2</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input id="checkbox-3" type="checkbox" name="checks">
|
||||
<label for="checkbox-3">Checkbox 3</label>
|
||||
</span>
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
@ -407,8 +411,10 @@ or [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_even
|
||||
> Individual field validation can be disable by setting
|
||||
[`onlyOnSubmit`](#onlyOnSubmit) to true.
|
||||
|
||||
## Field Options
|
||||
## Field Options {#field-options}
|
||||
|
||||
* [maxCount](#maxcount)
|
||||
* [minCount](#mincount)
|
||||
* [optional](#optional)
|
||||
* [pattern](#pattern)
|
||||
* [patternMessage](#patternmessage)
|
||||
@ -429,6 +435,24 @@ properly formatted JSON object with the properties and values below.
|
||||
</div>
|
||||
```
|
||||
|
||||
### maxCount (Checkboxes Only)
|
||||
|
||||
**Default:** `null`
|
||||
|
||||
Checkbox groups with the `maxCount` property set to an integer will fail validation
|
||||
if the number of checked inputs is over this limit.
|
||||
|
||||
> See [here](#checkbox-and-radio-fields) for more information on how to apply options to checkboxes.
|
||||
|
||||
### minCount (Checkboxes Only)
|
||||
|
||||
**Default:** `1`
|
||||
|
||||
Checkbox groups with the `minCount` property set to an integer will fail validation
|
||||
if the number of checked inputs is under this limit.
|
||||
|
||||
> See [here](#checkbox-and-radio-fields) for more information on how to apply options to checkboxes.
|
||||
|
||||
### optional
|
||||
|
||||
**Default:** `false`
|
||||
|
@ -62,7 +62,7 @@
|
||||
<label for="checkbox-1">Checkbox 1</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
<input data-validation='{"optional": false}' id="checkbox-2" type="checkbox" name="checks">
|
||||
<input id="checkbox-2" type="checkbox" name="checks">
|
||||
<label for="checkbox-2">Checkbox 2</label>
|
||||
</span>
|
||||
<span class="form-group__item">
|
||||
|
Reference in New Issue
Block a user