# new VPField()
Field instances are responsible for managing the internal state of individual fields. Field instances are capable of formatting input and validating input based on various events. See examples for more information.
Examples
// Simple DOM Binding, Field will be required
<div class="VPField">
<input id="full-name" aria-label="Full Name" name="name" type="text" required="required" />
</div>// Simple DOM Binding, pattern matching an email /.+@.+\..+/
<div class="VPField">
<label for="email">Email Address</label>
<input id="email" name="email" type="email" />
</div>// Programmic bindings, phone number w/ input formatter
const field = new VP.Field(document.getElementById('phone'), {
InputFormatter: {
pre: (value) => value.replace(/[^0-9]/g, ''),
post: (value) => {
const areaCode = value.substr(0, 3)
const local = value.substr(3, 3)
const number = value.substr(6, 4)
let mask = '('
if (areaCode.length > 0) mask += areaCode
if (local.length > 0) mask += ') ' + local
if (number.length > 0) mask += '-' + number
return mask
}
}
});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 |
# 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 |
# 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 |
# 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 Field instance.
- Validation can occur as either synchronous validation or asynchronous validation.
- Validation emulates standard DOM validation
- Validation consumes custom validation rules
- If Validation rules are all synchronous, isValid will be synchronous
- If Validation rules are async, isValid will be asynchronous
- If ValidateAsync option is enabled, isValid will ALWAYS be asynchronous
This method applies the necessary formatting for input values, if defined.
(boolean|Promise.
# parseInput()
Parses the internally tracked input and returns a standard interface used internally for the validation cycle.
# remove()
Notify parent that this field should be removed from tracking. This is handled automatically if using a modern browser where MutationObservers are support (IE11+). For most use-cases, this can be safely ignored; This method is provided for very specific edge cases where the internally tracked input may be removed after initialization.
# 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 |
# 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