AngularJS Form Validation

<script src="AngularJsLibrary.js"></script>

<script>
    var app = angular.module('myApp', []);

    app.controller('validateCtrl', function($scope) {

        $scope.user = 'Ananth';

        $scope.email = '[email protected]';

        $scope.password = 'PWD';

        $scope.city = 'KSKY';

        $scope.country = 'India';

        $scope.mobile = '9962613205';

    });
</script>

Here AngularJsLibrary is the library function of angularjs . It will refer from external file.

<body>

    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

        <table>

            <tr>

                <td>Name:

                </td>

                <td></td>

                <td>

                    <input type="text" name="user" ng-model="user" required>

                    <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

<span ng-show="myForm.user.$error.required">Username is required.</span>

                    </span>

                </td>

            </tr>

            <tr>

                <td>

                    Email: </td>

                <td></td>

                <td>

                    <input type="email" name="email" ng-model="email" required>

                    <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">

<span ng-show="myForm.email.$error.required">Email is required.</span>

                    <span ng-show="myForm.email.$error.email">Invalid email address.</span>

                    </span>

                </td>

            </tr>

            <tr>

                <td>Password:

                </td>

                <td></td>

                <td>

                    <input type="text" name="password" ng-model="password" required>

                    <span style="color: red" ng-show="myForm.password.$dirty && myForm.password.$invalid">

<span ng-show="myForm.password.$error.required">Password is required.</span>

                    </span>

                </td>

            </tr>

            <tr>

                <td>City:

                </td>

                <td></td>

                <td>

                    <input type="text" name="city" ng-model="city" required>

                    <span style="color: red" ng-show="myForm.city.$dirty && myForm.city.$invalid">

<span ng-show="myForm.city.$error.required">City is required.</span>

                    </span>
                </td>

            </tr>

            <tr>

                <td>Country:

                </td>

                <td></td>

                <td>

                    <input type="text" name="country" ng-model="country" required>

                    <span style="color: red" ng-show="myForm.country.$dirty && myForm.country.$invalid">

<span ng-show="myForm.country.$error.required">Country is required.</span>

                    </span>

                </td>

            </tr>

            <tr>

                <td>Mobile:

                </td>

                <td></td>

                <td>

                    <input type="text" name="mobile" ng-model="mobile" required>

                    <span style="color: red" ng-show="myForm.mobile.$dirty && myForm.mobile.$invalid">

<span ng-show="myForm.mobile.$error.required">Mobile is required.</span>

                    </span>
                </td>

            </tr>

            <tr>

                <td></td>F

                <td></td>

                <td>

                    <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid || myForm.password.$dirty && myForm.password.$invalid || myForm.city.$dirty && myForm.city.$invalid || myForm.country.$dirty && myForm.country.$invalid || myForm.mobile.$dirty && myForm.mobile.$invalid" />

                </td>

            </tr>

        </table>

    </form>

</body>