Form Validation 1

Simple validation through AngularJS directives.

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"  ng-submit="submitForm();">
             <h3>Basic example</h3>

            <div class="form-section">
                <p>Username:</p>
                <input type="text" name="username1" ng-model="username1"
                required />
                <input type="submit" />
                
                <p>Email:</p>
                <input type="email" name="email1" ng-model="email1" required
                />
                <input type="submit"     />              
            </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;
    padding:2px 4px;
    width:220px;
}
.form-section .custom-error {
    color:#FF0000;
}
[type='submit'] {
    background:@EEEEEE;
    border:1px solid #666666;
    height:26px;
    padding:4px 5px 3px;
    vertical-align:-1px;
    width:50px;
}

JavaScript

'use strict';

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

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

    //$scope.username1 = 'Peter Parker';
    //$scope.email1 = '[email protected]';

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

}