angular form test

by Ravindra Athreya

HTML

<form name="register" ng-app>
        <p>
            <label for="name">User:</label>
            <input type="text" ng-class="{highlight:register.name.$error.required || register.name.$error.minlength || register.name.$error.maxlength}" name="name" ng-model="name"
                   required  ng-minlength="5" ng-maxlength="32">
        <span ng-show="register.name.$error.required" class="err">
            Required</span>
        <span ng-show="register.name.$error.minlength" class="err">
            Minimum 5 characters</span>
        <span ng-show="register.name.$error.maxlength" class="err">
            Maximum 32 characters</span>
        </p>

        <p>
            <label for="pass">Pass:</label>
            <input type="password" name="pass" ng-model="user.pass"
                   required  ng-minlength="6" ng-maxlength="32"
                   ng-pattern="/^(?=.*[a-zA-Z])(?=.*[0-9])/">
        <span ng-show="register.pass.$error.required" class="err">
            Required</span>
        <span ng-show="register.pass.$error.minlength" class="err">
            Minimum 6 characters</span>
        <span ng-show="register.pass.$error.maxlength" class="err">
            Maximum 32 characters</span>
        <span ng-show="register.pass.$error.pattern" class="err">
            Must have both letters and numbers</span>
        </p>

        <p>
            <label for="age">Age:</label>
            <input type="number" name="age" ng-model="user.age"
                   required min="13">

        <span ng-show="register.age.$error.min" class="err">
            Must be 13 or older</span>
        </p>

        <p>
            <label for="email">Email:</label>
            <input type="email" name="email" ng-model="user.email"
                   required>
        <span ng-show="register.email.$error.required" class="err">
            Required</span>
        <span ng-show="register.email.$error.email" class="err">
            Not a valid email address</span>
       ...

CSS

form { display: block; width: 550px; margin: auto; }
        input[type="submit"] { margin-left: 215px; }
        span.err { color: #f00; }
        label { width: 120px; display:inline-block; text-align: right; }
.highlight { 
    background:#F84072;
    border: 2px red solid;
}