AngularJS and form validation

Complete overview on how validate a form with native and custom directives of AngularJS.

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">
        <div id="main">
             <h1>Form Validation</h1>

            <div id="more">
                <p>Read <a href="http://blog.brunoscopelliti.com/form-validation-the-angularjs-way"
                    title="Form Validation: The AngularJS Way">Form Validation: The AngularJS Way</a>.</p>
            </div>
            <p class="intro">This example shows how validate forms thanks to AngularJS.
                <br/>AngularJS performs a client side validation; the main objective of client
                side validation is not to ensure the security of the data system, but it
                is to help user complete the submission of the form. Because the client
                side validation could be easily bypassed, it is important to replicate
                the validation and sanitization of the data also server side.</p>
            <form
            name="myForm" novalidate ng-submit="submitForm();">
                 <h2>Form submit:</h2>

                <p>Note that I didn't specify an <em>action</em> property for the form. That's
                    because AngularJS prevents the default action (form submission to the server)
                    unless the &lt;form&gt; element has an action attribute specified. I use
                    the <a href="http://docs.angularjs.org/api/ng.directive:ngSubmit" title="AngularJS api: ngSubmit"
                    target="_blank">ngSubmit</a> directive to specify a behaviour to apply when
                    the form is submitted.</p>
                 <h2>AngularJS novalidate:</h2>

                <p>On the form is used the directive <b>novalidate</b>, to disable browser's
                    native form validation.</p>
                 <h2>AngularJS built-in directive for form validation:</h2>

               ...

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.username2 = 'Clark Kent';

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

}