How to display a message when a form input is valid?

I'm having a hard time to display a message when an input is valid. To display error messages, it is working alright. This is what I'm trying:

<form>
...
<div class="form-group">
                    <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
                    <div class="col-xs-10">
                        <input type="text" id="inputUser" name="usernameInput" class="form-control textbox" 
                               placeholder="Digite seu Username" width="25" ng-model="username.value" 
                               ng-minlength="4" ng-maxlength="10" valid="validateForm.usernameInput.$valid" required>
                        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
                            <div class="error-message" ng-message="required">*This field is required</div>
                            <div class="error-message" ng-message="minlength">*Username too short</div>
                            <div class="error-message" ng-message="maxlength">*Username too long</div>
                        </div>
                        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$valid">
                            <div class="valid-message" ng-message="valid">valid!</div>
                        </div>
                    </div>
                </div>

</form

I also tried to set "ng-message" with the $valid ng-model but to no avail. Any tips?

Solution

your form wasn't named
the value of ng-messages should be an object containing a property/properties that you want to validate against. eg input.$error can have in your case required,minlength or maxlength. its different for $valid because that has true/false values, so we check for the property $valid on the object usernameInput for true/false
the value of ng-message should be the name of the property to check on the containing block's ng-messages value object. if the value of the property is truthy you see the content, and you dont if its falsy.
ng-messages/ng-message probably isnt the right solution for your case since you're checking one value and displaying one message.

TLDR

ng-messages : name of object*
ng-message : name of property of object*
if the value of property is truthy, content of ng-message shows... falsy, nothing shows.

angular.module('formDemo', ['ngMessages']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-messages.js"></script>

<body ng-app="formDemo">
  <form name="validateForm">
    ...
    <div class="form-group">
      <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
      <div class="col-xs-10">
        <input 
        type="text" 
        id="inputUser"
        name="usernameInput"
        class="form-control textbox"
        placeholder="Digite seu Username"
        width="25"
        ng-model="username.value"
        ng-minlength="4"
        ng-maxlength="10"
        required>
        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
          <div class="error-message" ng-message="required">*This field is required</div>
          <div class="error-message" ng-message="minlength">*Username too short</div>
          <div class="error-message" ng-message="maxlength">*Username too long</div>
        </div>
        <div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput">
          <div class="valid-message" ng-message="$valid">valid!</div>
        </div>
      </div>
    </div>

  </form>
</body>