<form id="test-form">
  <!-- Fields that are not required and have no validation specified -->
  <h2>Fields that are not required and have no validation specified</h2>
  <div class="form-group">
    <label for="text-not-required-no-validation" class="control-label">Text Field (not required)</label>
    <input id="text-not-required-no-validation" type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label for="email-not-required-no-validation" class="control-label">Email Field (not required)</label>
    <input id="email-not-required-no-validation" type="email" class="form-control" />
  </div>
  <div class="form-group">
    <label for="password-not-required-no-validation" class="control-label">Password Field (not required)</label>
    <input id="password-not-required-no-validation" type="password" class="form-control" />
  </div>
  <div class="radio">
    <label for="radioA-not-required-no-validation">
      <input id="radioA-not-required-no-validation" name="Radio-not-required-no-validation" type="radio" value="a" />Radio A (not required)
    </label>
    <label for="radioB-not-required-no-validation">
      <input id="radioB-not-required-no-validation" name="Radio-not-required-no-validation" type="radio" value="b" />Radio B (not required)
    </label>
  </div>

  <!-- Fields that are required -->
  <h2>Fields that are required</h2>
  <div class="form-group">
    <label for="text-required" class="control-label">Text Field</label>
    <input id="text-required" type="text" aria-required="true" class="form-control" />
  </div>
  <div class="form-group">
    <label for="email-required" class="control-label">Email Field</label>
    <input id="email-required" type="email" aria-required="true" class="form-control" />
  </div>
  <div class="form-group">
    <label for="password-required" class="control-label">Password Field</label>
    <input id="password-required" type="password" aria-required="true" class="form-control" />
  </div>
  <div class="radio">
    <label for="radioA-required">
      <input id="radioA-required" type="radio" name="radio-required" value="a" />Radio A
    </label>
    <label for="radioB-required">
      <input id="radioB-required" type="radio" name="radio-required" value="b" aria-required="true" />Radio B
    </label>
  </div>

  <!-- Fields that are not required but have validation specified -->
  <h2>Fields that are not required but have validation specified</h2>
  <div class="form-group">
    <label for="email-not-required-with-validation" class="control-label">Email Field</label>
    <input id="email-not-required-with-validation" type="email" data-validation="email" class="form-control" />
  </div>
  <div class="form-group">
    <label for="password-not-required-with-validation" class="control-label">Password Field</label>
    <input id="password-not-required-with-validation" type="password" data-validation="password" class="form-control" />
  </div>
  <div class="radio">
    <label for="radioA-not-required-with-validation">
      <input id="radioA-not-required-with-validation" name="radio-not-required-with-validation" type="radio" value="a" />Radio A (not required)
    </label>
    <label for="radioB-not-required-with-validation">
      <input id="radioB-not-required-with-validation" name="radio-not-required-with-validation" type="radio" value="b" data-validation="radio" />Radio B (not required)
    </label>
  </div>

  <button id="form-submit" type="submit" class="btn btn-default">Save</button>
</form>