Form Validation 2

This example put the focus on AngularJS stylesheet classes.

by bruscopelliti

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
    
    <head>
        <meta charset="utf-8" />
        <title>My AngularJS App</title>
    </head>
    
    <body ng-controller="stageController">
        <form name="myForm" novalidate ng-submit="submitForm();">
             <h3>AngularJS CSS</h3>

            <div id="css" class="form-section">
                <p>Username:</p>
                <div style="width:264px;">
                    <input type="text" name="username2" ng-model="username2" required /> <span class="ok">☑</span>
 <span class="ko">☒</span>

                </div>
                <div class="custom-error" ng-show="myForm.username2.$dirty && myForm.username2.$invalid">Invalid: <span ng-show="myForm.username2.$error.required">Username is required.</span>

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

</html>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style> .form-section {
    font-size:14px;
    margin:10px 0;
}
.form-section p {
    margin:5px 0;
}
.form-section input:not([type='submit']) {
    height:18px;
    outline:0;
    padding:2px 4px;
    width:220px;
}
.form-section .custom-error {
    color:#FF0000;
}
/* AngularJS CSS class 
     I wish use style only the input field in the 'AngularJS CSS' paragraph */
 #css span.ok, #css span.ko {
    display:none;
    float: right;
    font-size:36px;
    margin-top: -12px;
}
#css .ng-pristine {
    border:1px solid Gold;
}
#css .ng-dirty.ng-valid {
    border:1px solid Green;
}
#css .ng-dirty.ng-invalid {
    border:1px solid Red;
}
#css .ng-dirty.ng-valid ~ span.ok {
    color:green;
    display:inline;
}
#css .ng-dirty.ng-invalid ~ span.ko {
    color:red;
    display:inline;
}

JavaScript

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', []);

/* Controllers */
function stageController($scope) {

    $scope.username2 = 'Clark Kent';

    $scope.submitForm = function () {
        console.info("Here I should implement the logic to send a request to the server.");
    }

}