Forms

Print icon Print

Sample form with custom Validation

The following form consist of all input fields required and it is check with javascript. When the form is submitted, it will check all required fields and alert the user of the fields that have errors. This inputs in this form does not have the required attribute, because the form use javascript to check the input fields. To make sure assistive technologies know that these fields are required, we added the aria-required attribute.

Input tag with HTML5 required attribute and aria-required


  <div class="row">
    <div class="container">
      <div class="span12">
        <div class="control-group">
          <label class="control-label">
          Topic<span class="required">*</span>
          <div class="validationMessage" aria-live="polite" style="display: none" aria-hidden="true"></div>
          <select name="Topic" aria-required="true" >
            <option value=""></option>
            <option value="Topic 1">Topic 1</option>
            <option value="Topic 2">Topic 2</option>
            <option value="Topic 3">Topic 3</option>
          </select>
          </label>
        </div>
      </div>
    </div>
  </div>

* Indicates required fields

What is the priority of this request ?

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.