Accessible Form Validation (afova)
afova is leveraging the Constraint Validation API to do client-side form validation. Please refer to:
- https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation
Put the script afova.min.js into your HTML page head:
<head>
…
<script defer src="/js/afova.min.js"</script>
…
</head>Initialize afova
<script>
addEventListener('DOMContentLoaded', () => afova.init());;
</script>afova offers the following methods:
Initialize afova. Sample call:
afova.init({ //default options, you can omit the options object
focusOnFirstError: true,
validateOnChange: false,
});The script will iterate through all forms on a web page and deactivate browser validation
in favor of afova. The afova form validation will occur on submit of a form and on change of a field
(if you´ve set validateOnChangeto true in your settings ).
All errors that can be checked with the Constraint Validation API are validated by afova.
If the default error messages from afova shouldn´t be used, you can define custom error messages
as data attributes for each field. For example:
<div class="afova-group">
<label for="custom-pattern-input">A pattern input with custom failure message
<div class="description">Please provide a string that contains any mix of A-Z or a-z and has a length of 3 charactes.</div>
<input id="custom-pattern-input" type="text"
pattern="[A-Za-z]{3}"
data-pattern-mismatch="The value is not in the correct format. Correct formats are AbC or xyz, for example.">
</label>
</div>The following attributes are available to define validation error messages:
- data-bad-input
- The browser is unable to handle the input value
- data-pattern-mismatch
- The value of a field doesn´t comply to the pattern of the
patternattribute - data-range-overflow
- The number value of a field is bigger than the value of the
maxattribute - data-range-underflow
- The number value of a field is smaller than the value of the
minattribute - data-step-mismatch
- The number value of field is not evenly divisable by the value of the
stepattribute - data-too-long
- The value of a field has more characters than defined by the attribute
maxlength - data-too-short
- The value of a field has less characters than defined by the attribute
minlength - data-type-mismatch
- The value of a field dosn´t comply to the
typeattribute - data-value-missing
- A value of a field that is required due to the
requiredattribute is missing
Messages that can be derived from the HTML data attributes, like above, will have the CSS class derived assigned to them.
optionsObject? The settings for afova (optional, default{focusOnFirstError:true,validateOnChange:false})options.focusOnFirstErrorboolean? If true, the first errored field will be focused. If false, the first errored field will not receive focus.options.validateOnChangeboolean? If true, each field will be validate on its change without waiting for a form submit. If false the validation will only occurr on submit of the form.
Inject a message and bind it to a form element. Injected messages will have the CSS class injected assigned to them.
Typically it shouldn´t be necessary to inject a message for anything that can be solved with the derived messages (see the init() method above).
Sample call:
afova.injectMessage('requiredInput', 'You provided a value but the value is not correct'); identifier(Element | string) Identify the form element for which the error message should be set. If the parameter is a string, it will be interpreted as the id of the form element.messagestring The message to set.optionsObject (optional, default{messageId:undefined,focus:false})
Returns string The id of the injected message and undefined if no message was set.
Remove all injected messages that are linked to a form element, or remove a message that is identified by its id. Sample call:
afova.clearMessage('requiredInput check3');
//will clear all injected messages for the form elements that have the id´s requiredInput and check3
afova.clearMessage('requiredInput', 'check3');
//this call is equivalent to the previous oneidentifier...(Element | string)- If identifier is a form element, all injected error messages of that form element will be removed.
- If identifier is a string that contains the id of a form element, all injected error messages of that form element will be removed.
- If identifier is a string that contains the id of a message, that message will be removed.
- If identifier is a string that contains a list of id´s, separated by space or comma, messages will be cleared for those id´s by applying the same rules as for a single id
- You might also provide a comma-separated list of identifiers (spread/rest operator ...)
messageTypestring Describes the messageType to get a message for. For allowed values @see getMessageTypes.identifier(Element | string) Identify the form element for which the error message should be determined. If the parameter is a string, it will be interpreted as the id of the form element. If the identifier is not provided, the default message for the given messageType will be returned. (optional, defaultundefined)
Returns any The message text for the given message type. If identifier refers to a field, the actual message of the field for the given messageType is returned.
Returns any An array of all supported message types.