Input validation of form control

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/form-before-unload-confirm": "..."
    }
  }
</script>
<script type="module">
  import formControlValidation from '@w0s/form-control-validation';

  formControlValidation(document.querySelectorAll('.js-form-control-validation')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
</script>

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

<!-- radio buttons -->
<p role="radiogroup" class="js-form-control-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-form-control-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-form-control-validation"
  aria-errormessage="validation-textarea"></textarea></p>
<p hidden="" id="validation-textarea"></p>

HTML Attributes

Invalid style example

:where(input, select, textarea):user-invalid,
[role='radiogroup']:has(input[type='radio']:user-invalid) {
  /* any styles */
}

or

:where(input, [role='radiogroup'], select, textarea)[aria-invalid='true'] {
  /* any styles */
}