@saekitominaga/htmlformcontrolelement-validation

Input validation of form control

Demo

• Demo page

Examples

<script type="module">
import FormControlValidation from './dist/FormControlValidation.js';

for (const formControlElement of document.querySelectorAll('.js-validation')) {
  const formControlValidation = new FormControlValidation(formControlElement);
  formControlValidation.init();
}
</script>

<!-- input -->
<p><input class="js-validation" pattern="[a-zA-Z0-9]+"
  aria-errormessage="validation-input"
  data-validation-message-pattern="Only alphanumeric characters can be used."
/></p>
<p hidden="" id="validation-input"></p>

<!-- radio buttons -->
<p role="radiogroup" class="js-validation" aria-errormessage="validation-radio">
<label><input type="radio" required="" />Radio 1</label>
<label><input type="radio" required="" />Radio 2</label>
</p>
<p hidden="" id="validation-radio"></p>

<!-- select -->
<p><select class="js-validation" required="" aria-errormessage="validation-select">
<option label="Please select"></option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select></p>
<p hidden="" id="validation-select"></p>

<!-- textarea -->
<p><textarea class="js-validation"
  aria-errormessage="validation-textarea"></textarea></p>
<p hidden="" id="validation-textarea"></p>

Constructor

new FormControlValidation(
  thisElement: HTMLElement
)

Parameters

thisElement [required]

Target element

* The second argument invalidClassName, which existed in version 1 series, has been removed in version 2.0.0 . To use status determination in style sheets, use the aria-invalid attribute, which is set automatically.

HTMLElement Attributes

aria-errormessage [required]

ID of the element that displays the validation message. See WAI-ARIA 1.2 for details.

data-validation-message-pattern [optional]

Error message when it does not match the pattern attribute value. (If omitted, the default message of the browser is displayed.)

* The data-validation-message-for attribute that existed in version 1 series has been replaced by the aria-errormessage attribute in version 2.0.0 . Also, the markup for radio buttons has been changed from version 1 series.