# new VPFieldset()
Fieldset instances are responsible for managing the relationship between fields. Fieldset instances are capable of validating fields based upon a relationship, such as checkbox/radio fields being interdependent.
Examples
// DOM Bindings, All Fields must validate true
<div id="sample_fieldset" class="VPFieldset" vp-find>
<div class="VPField" vp-notify="false">
<input id="first-name" aria-label="First Name" name="first-name" type="text" required="required" />
</div>
<div class="VPField" vp-notify="false">
<input id="last-name" aria-label="Last Name" name="last-name" type="text" required="required" />
</div>
</div>// DOM Bindings, One field must be true
<div id="sample_fieldset" class="VPFieldset" vp-strategy="one" vp-find>
<div class="VPField">
<label for="option_one">
<input id="option_one" name="option-one" type="radio" value="one" required="required" />
Option #1
</label>
</div>
<div class="VPField">
<label for="option_two">
<input id="option_two" name="option-two" type="radio" value="two" required="required" />
Option #2
</label>
</div>
<div class="VPField">
<label for="option_three">
<input id="option_three" name="option-three" type="radio" value="three" required="required" />
Option #3
</label>
</div>
</div>// Programmic bindings
const fieldset = new VP.Fieldset(document.getElementById('sample_fieldset'), {
ValidationStrategy: "one"
});
const option_one_field = new VP.Field(document.getElementsById('field_one'))
const option_two_field = new VP.Field(document.getElementsById('field_two'))
const option_three_field = new VP.Field(document.getElementsById('field_three'))
fieldset.addField(option_one_field);
fieldset.addField(option_two_field);
fieldset.addField(option_three_field);Extends
Classes
Methods
# addEventListener(event_name, callback)
Add an event listener
Parameters:
| Name | Type | Description |
|---|---|---|
event_name |
string | Name of the event |
callback |
EventCallback | Event callback to fire |
# addField(field, indexopt)
Add a field instance to be tracked
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
field |
VPField | Field to track |
|
index |
number |
<optional> |
Indicate the field order to track by |
# addMessage(message, statusopt)
Adds a unique message to the $MessageNode
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
message |
The message to append |
||
status |
<optional> |
An optional class to append indicating message status |
- Overrides:
If the $MessageNode isn't set or isn't an HTMLElement
# addMessages(messages, statusopt)
Batch append messages
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
messages |
The messages to append |
||
status |
<optional> |
An optional class to append indicating message status |
If the $MessageNode isn't set or isn't an HTMLElement
# clearMessages()
Clear all messages from the $MessageNode (If set)
# createEvent(event_name, options) → {Event}
Helper for creating a new event, supporting IE9
Parameters:
| Name | Type | Description |
|---|---|---|
event_name |
string | Name of the event |
options |
EventOptions | Event options |
# createField(el, options)
Helper method for creating a new Field to automatically track
Parameters:
| Name | Type | Description |
|---|---|---|
el |
HTMLElement | Field Element |
options |
VPFieldOptions | Options to apply to the field instance |
# dispatchEvent(event, data) → {boolean}
Include support for passing data along event
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event | the Event object to dispatch |
data |
any | Data to be passed to the callback |
# findFields(fieldOptionsopt)
Helper for automatically parsing child elements for Fields
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
fieldOptions |
VPFieldOptions | Array.<VPFieldOptions> |
<optional> |
Options to apply to the found fields. If array, options will apply based on index |
# generateMessageNode(anchoropt, posopt)
Generate a messageNode where messages can be added and removed in a managed way.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
anchor |
<optional> |
The anchor to use for the $MessageNode (Defaults to $MessageAnchor) |
|
pos |
<optional> |
The position to set $MessageNode inside the $MessageAnchor |
If anchor isn't an Element
If pos isn't a valid
# isElementVisible(element)
Helper method to determine if the element is visible within the DOM
Parameters:
| Name | Type | Description |
|---|---|---|
element |
HTMLElement | Element to test |
boolean
# isValid()
Standard Validation cycle for the Fieldset instance.
- Validation will validate all tracked Fields
- Validation will return as either synchronous validation or asynchronous based on field responses.
- If Lazy, validation will stop at the first error
(boolean|Promise.
# removeEventListener(event_name, callback) → {EventCallback|null}
Remove an event listener
Parameters:
| Name | Type | Description |
|---|---|---|
event_name |
string | Name of the event |
callback |
EventCallback | The event callback to remove |
# removeField(field)
Remove a tracked field from this fieldset
Parameters:
| Name | Type | Description |
|---|---|---|
field |
VPField | Field instance to remove |
# removeMessage(message)
Remove a message
Parameters:
| Name | Type | Description |
|---|---|---|
message |
The message to remove |
If the $MessageNode isn't set or isn't an HTMLElement
# removeMessageNode()
Removes the $MessageNode from the $MessageAnchor
If the $MessageNode isn't set or isn't an HTMLElement