xebia/angular-form-messages-example

<h2>Show success</h2>
<div class="row">
  <div class="col-lg-4">

    <p>When the <code>af-show-succes="true"</code> attribute is added to the form, the fields that are valid, are marked.</p>
    <ul>
      <li>When a form group has the <code>af-feedback</code> directive, a green check appears in the field.</li>
      <li>When a form group has the <code>af-field-state</code> directive, the <code>has-success</code> class is added.</li>
    </ul>
  </div>

  <div class="col-lg-8">
    <form class="form-horizontal" af-submit="submitSimple()" name="userForm" af-show-success="true" novalidate>
      <fieldset>
        <legend>Personal information</legend>

        <div class="form-group" af-field-state af-feedback af-field-name="user.name">
          <label class="control-label col-md-2" for="name">Name*</label>
          <div class="col-md-4">
            <input type="text" class="form-control" id="name" name="user.name" ng-model="user.name" af-field name-length="3" required />
            <div af-messages="user.name"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.name">{{user.name}}</pre></div>
        </div>

        <div class="form-group" af-field-state af-feedback af-field-name="user.email">
          <label class="control-label col-md-2" for="email">E-mail*</label>
          <div class="col-md-4">
            <input type="email" class="form-control" id="email" name="user.email" ng-model="user.email" af-field required />
            <div af-messages="user.email"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.email">{{user.email}}</pre></div>
        </div>

        <div class="form-group" af-field-state="user.color">
          <label class="control-label col-md-2" for="color">Favorite color</label>
          <div class="col-md-4">
            <select class="form-control" name="user.color" id="color" af-field ng-model="user.color" ng-options="value for (key, value) in {red: 'Red', blue: 'Blue', green: 'Green'}" required>
              <option value=""></option>
            </select>
            <div af-messages="user.color"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.color">{{user.color}}</pre></div>
        </div>

        <div class="form-group" af-field-state="user.agree">
          <label class="col-md-2 control-label">Agreement*</label>
          <div class="col-md-4">
            <div class="checkbox">
              <label>
                <input type="checkbox" af-field name="user.agree" ng-model="user.agree" required>
                I agree
              </label>
            </div>
            <div af-messages="user.agree"></div>
          </div>
          <div class="col-md-6"><pre ng-show="user.agree">{{user.agree}}</pre></div>
        </div>
      </fieldset>

      <p>
        <button type="submit" class="btn btn-primary" af-submit-button>Submit</button>
        <span ng-show="isSubmitting" class="spinner"></span>
      </p>

    </form>
  </div>
</div>