14.7 #Input.invalid Invalid field

    <div class="sf-input ng-invalid ng-dirty">
        <label class="sf-input__label" for="input-77" >
             <span>Required Input</span>
        </label>
        <input type="text" class="sf-input__field ng-invalid ng-dirty" required value="User name" id="input-77" />
        <p class="sf-input__required">Field is required</p>
        <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
    </div>
    <div class="sf-input -required">
        <label class="sf-input__label" for="input-8" >
             <span>Required Input</span>
        </label>
        <input type="text" class="sf-input__field -required ng-invalid ng-dirty" required value="User name" id="input-8" />
        <p class="sf-input__required">Field is required</p>
        <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
    </div>