<div class="c-question">
  <label class="label" for="question-text">Can you please answer this question?</label>
  <p>Descriptive text can go here to help clarify the question.</p>
  <div class="c-question__container" data-js="question-container">
    <div class="input">
      <input id="question-text" name="question-text" type="text" />
    </div>
  </div>
</div>

The Question Component is a structured input element that provides a user friendly way of requesting information from a user to fill out a form. The <label> element sentence should be structured in the form of a question. Additional information to clarify what is required to answer the question can be added in a <p> tag below the question text.

The input element can be any input type or select element. Questions with options, specifically checkbox and radio groups, will require the <fieldset> element as the root element and the <legend> element as the question label to properly structure the question for screen readers. See the demonstration below.

<fieldset class="c-question">
  <legend class="label">Which of the following options apply to you?</legend>
  <p>Feel free to choose as many as you like.</p>
  <div class="c-question__container" data-js="question-container">
    <label class="option" for="option-1">
      <input id="option-1" name="option['option-1']" type="checkbox" value="option-1" />
      <span class="option__base">
        <svg aria-hidden="true" class="option__graphic">
          <use xlink:href="#option-nyco-checkbox"></use>
        </svg>
        <span class="option__label">Option 1</span>
      </span>
    </label>
    <label class="option" for="option-2">
      <input id="option-2" name="option['option-2']" type="checkbox" value="option-2" />
      <span class="option__base">
        <svg aria-hidden="true" class="option__graphic">
          <use xlink:href="#option-nyco-checkbox"></use>
        </svg>
        <span class="option__label">Option 2</span>
      </span>
    </label>
    <label class="option" for="option-3">
      <input id="option-3" name="option['option-3']" type="checkbox" value="option-3" />
      <span class="option__base">
        <svg aria-hidden="true" class="option__graphic">
          <use xlink:href="#option-nyco-checkbox"></use>
        </svg>
        <span class="option__label">Option 3</span>
      </span>
    </label>
  </div>
</fieldset>

Questions with multiple options, specifically checkbox and radio button groups, will require the <fieldset> element as the root element and the <legend> element as the question label to properly structure the question for screen readers.

<div class="c-question">
  <label class="label" for="question-text-required">What is the answer this question?<span aria-hidden="true" class="c-question__required">&nbsp;*</span>
  </label>
  <p>Please enter any text into the field below.</p>
  <div class="c-question__container" data-js="question-container">
    <div class="input">
      <input id="question-text-required" name="question-text-required" required="true" type="text" />
    </div>
  </div>
</div>

Required questions will use built-in form validation to trigger native validation on the blur event of the text input. Native attributes such as required and pattern can be used to set explicit types of validation. These are described in more detail in the MDN Form Validation documentation.

In order to use the error messaging included in the pattern library JavaScript validation needs to be invoked. This will add an error message to the DOM above the <input> element. Inputs that are invalid will be described by the error message as well as be announced to screen readers using the aria-live='polite' attribute.

Validation

To utilize form validation through the global NYCO Patterns script use the following code.

<form id="question-demo">
  <!-- Form Questions -->
</form>

Assuming you have a form on the page with an ID of question-demo, pass the <form> ID to the nyco.valid() method:

var nyco = new NYCO();

nyco.valid('#question-demo', function(event) {
  event.preventDefault();

  return false;
});

The method accepts two arguments; the first being the ID of the form and the second is the event handler for an invalid response.

ES Module

This method is a wrapper around the Patterns Scripts form utility which is included as a dependency of this project. The utility can be imported as an ES module and instantiated separately.

import Forms from '@nycopportunity/pttrn-scripts/src/forms/forms';

let Form = new Forms(document.querySelector('#question-demo'));

Form.submit = function(event) {
  event.preventDefault();

  return false;
};

Form.selectors.ERROR_MESSAGE_PARENT = '[data-js*="question-container"]';

Form.watch();