0.1.0 • Published 2 years ago

afova v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Table of Contents

afova

Accessible Form Validation (afova)

afova is leveraging the Constraint Validation API to do client-side form validation. Please refer to:

Usage

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:

init

Initialize afova. Sample call:

afova.init({focusOnFirstError: true, validateOnChange: false});

The script will iterate through all forms on a web page and deactivate browser validation in favor of afova. The form validation will occur on submit of a form and on change of a field. 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, custom error messages can be defined as data attributes for each field. For example:

<div class="afova-group">
    <label for="custom-pattern-input">A pattern input with custom failure message</label>
    <div>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.">
 </div>

The following attributes are available to define validation error messages:

Messages that can be derived from the HTML data attributes, like above, will have the CSS class derived assigned to them.

Parameters

  • options Object? The settings for afova (optional, default {focusOnFirstError:true,validateOnChange:false})
    • options.focusOnFirstError boolean? If true, the first errored field will be focused. If false, the first errored field will not receive focus.
    • options.validateOnChange boolean? 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.

injectMessage

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');

Parameters

  • 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.
  • message string The message to set.
  • options Object (optional, default {messageId:undefined,focus:false})
    • options.messageId string? The id for the message. If this id is not provided, a new id will be generated.
    • options.focus boolean? If true the focus will be set to the field.

Returns string The id of the injected message and undefined if no message was set.

clearMessage

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 one

Parameters

  • identifier ...(Element | string) If identifier is a form element, all injected error messages of that form element will be removed.

getMessage

Parameters

  • messageType string 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, default undefined)

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.

getMessageTypes

Returns any An array of all supported message types.

@everything-registry/sub-chunk-1104@zalastax/nolb-afo
0.1.0

2 years ago