AngularJS Validation

Simple validation with AngularJS

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app="">
    <div class="ng-valid ng-pristine info-block">VALID : PRISTINE</div>
    <div class="ng-invalid ng-dirty info-block">INVALID : DIRTY</div>
    <form class="validation-form" name="vform" ng-submit="submit()" novalidate >
        <h4>AngularJS Validation</h4>
        <div>
            <span>First Name</span>
            <input id="firstName" type="text" name="fname" 
                ng-model="fname" required />
            <span class="error" 
                ng-show="vform.fname.$dirty && vform.fname.$invalid">
                    Required field
            </span>
        </div>
        <div>
            <span>Last Name</span>
            <input id="lastName" type="text" name="lname" 
                ng-model="lname" required />
            <span class="error" 
                ng-show="vform.lname.$dirty && vform.lname.$error.required">Required field</span>
        </div>
        <div>
            <span>E-mail</span>
            <input id="eMail" type="email" name="email" ng-model="email" />
            <span ng-show="vform.email.$invalid" 
                class="error">Not like e-mail!</span>
        </div>
        <div>
            <span>Your age</span>
            <input type="number" name="numberN" 
                ng-model="numberM" min="17" max="77" required />
            <span ng-show="vform.numberM.$dirty && vform.numberN.$error.required"
                class="error">Enter number!</span>
            <span ng-show="vform.numberN.$error.min" 
                class="error">Too young!</span>
            <span ng-show="vform.numberN.$error.max" 
                class="error">Too old!</span>
        </div>
        <div>
            <input class="btn" type="submit" id="submit" value="Submit" ng-disabled="vform.$invalid" />
        </div>
    </form>
</div>

CSS

.validation-form > div > span {
    display: inline-block;
    width: 100px;
}
.validation-form > div > input {
    width: 200px;
}
.validation-form > div > input[type=submit] {
    width: 100px;
}
.error { color: red; }
.info-block {
    height: 30px;
    margin: 3px;
    text-align: center;
}

.ng-dirty {
    border-right-style: dotted;
}
.ng-pristine {
    border-right-style: dashed;
}

.ng-valid {
    border-left-style: dotted;
}
.ng-invalid {
    border-left-style: dashed;
}

JavaScript

/*

How to debug?
why it's not showing "AGE"-required error when ng-show:
    vform.numberM.$dirty && vform.numberN.$error.required ???
it's showing only for:
    vform.numberN.$error.required    
but all the time...
I need only when input is dirty.
    
*/
/*
function formController($scope){
    $scope.submit=function(){
        alert(angular.toJson($scope.LovelyForm));
    }
}*/