AngularJS Form Validation - Numeric Field

Basic example of numeric field validation in AngularJS

by robhortn

HTML

<body ng-app="myApp">
    <div id="main" ng-controller="stageController">
        <h1>Simple Form Validation (Numeric Field)</h1>

        <form name="myForm" novalidate 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" ng-disabled="myForm.username1.$pristine || myForm.username1.$dirty && myForm.username1.$invalid">
                <div class="custom-error" ng-show="myForm.username1.$dirty && myForm.username1.$invalid">
                    Invalid: <span ng-show="myForm.username1.$error.required">Username is required.</span>

                </div>
                <p>Email:</p>
                <input type="email" name="email1" ng-model="email1" required />
                <input type="submit" ng-disabled="myForm.email1.$pristine || myForm.email1.$dirty && myForm.email1.$invalid">
                <div class="custom-error" ng-show="myForm.email1.$dirty && myForm.email1.$invalid">
                    Invalid: <span ng-show="myForm.email1.$error.required">Email is required.</span>

                    <span ng-show="myForm.email1.$error.email">Please, write a valid email address.</span>
                </div>
                <p>Member Id:</p>
                <input type="text" name="memberId" ng-model="memberId" required ng-pattern="/[0-9]/" />
                <input type="submit" ng-disabled="myForm.memberId.$pristine || myForm.memberId.$dirty && myForm.memberId.$invalid">
                <div class="custom-error" ng-show="myForm.memberId.$dirty && myForm.memberId.$invalid">
                    Invalid: Numeric value is required.
                </div>
            </div>
        </form>
</body>

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> #main {
    color:#333333;
    cursor:default;
    font-family:serif;
    font-size:14px;
    margin:0 auto 100px;
    padding:10px;
    width:580px;
}
#main h1 {
    font-size:24px;
}
#main h2 {
    font-size:16px;
    font-variant:small-caps;
}
#main h3 {
    font-size:14px;
    font-weight:normal;
    font-variant:small-caps;
}
#main p.intro {
    margin:5px 0 20px;
}
#main p span.code {
    background:#EFEFEF;
    box-shadow:1px 1px 4px 1px #999999 inset;
    color:#000000;
    display:block;
    margin:10px 0 10px 30px;
    padding:10px;
    position:relative;
    text-shadow:0 1px 0 #CCCCCC;
}
#main p span.code span {
    display:block;
    margin-bottom:1px;
}
#main p span.code span.comment-style {
    color:#666666;
    text-shadow:none;
}
#main p span.code span.comment {
    display:inline;
    position:absolute;
    left:180px;
}
#main p span.code span.indent {
    padding-left:15px;
}
.form-section {
    margin:10px 0 10px 30px;
}
.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;
}
/* 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:34px;
    margin-top: -13px;
}
#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;
}
#final-note {
    background:#EFEFEF;
    margin:30px 0 25px;
    padding:5px 10px;
}
#final-note p {
    margin:5px 0;
    text-align:center;
}
#more {
  ...

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.memberId = 0;

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

}