Home AngularJs How to Apply AngularJS Form Validation ?

How to Apply AngularJS Form Validation ?

by Shahriar Sagor
AngularJS Form Validation

Today now in this post i will show how to apply angularjs form validation? We know that AngularJs is one of the most popular JavaScript framework which is developed by Google. As we know that this framework is dominating the world because of its has powerful features. Now in this tutorial, i will show you how to apply angularjs form validation.

In this process is a very simple and also straight-forward.Just you need to walk through it step by step. As an example, let’s assume we need a simple form and then we need to apply some basic validation to it.

Below is my form listed.
<html>
    <head>
        <title>AngularJS Form Validation</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="bs-example">
                        <form name="userForm" ng-submit="addUser(userForm)" ng-class="{submitted:userformsubmit}" novalidate>
                            <div class="form-group">
                                <label for="fname">First Name</label>
                                <input type="text" class="form-control" id="fname" ng-model="userForm.fname" ng-minlength="5" ng-pattern="/^[a-zA-Z]*$/" placeholder="First Name" required>
                            </div>
                            <div class="form-group">
                                <label for="lname">Last Name</label>
                                <input type="text" class="form-control" id="lname" placeholder="Last Name" ng-model="userForm.lname" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Email" ng-model="userForm.email" required>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

We can observed that we need to added required attribute to our form fields which would apply the default html5 validation. But if we need our custom validations, not a html one. So then we should add novalidate attribute to our form tag which will be remove html validation.

<form name="userForm" novalidate>

As we are using in the AngularJS we need to follow there rules as well. So we should define ng-app and ng-controller.

<html ng-app="app">
<body ng-controller="myCtrl">

We have to add one custom class to our form tag once we submit the form. By using this class you can add css for error messages.

<form name="userForm" ng-submit="addUser()"
ng-class="{submitted:userformsubmit}" novalidate>
But how our custom class can add to form automatically?

Its a little magic. Need to Set the variable userformsubmit to true.

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
    angular.module('app', []).
    controller('myCtrl', function($scope){
        $scope.addUser = function(user) {
            $scope.userformsubmit = true;
        }
    });
</script>

Above the code will add class ‘submitted’ to our form once we need to submit it. But we never notice what’s happening until we need to add some css-tricks.

So lets add a little piece of css here.

<style>
.submitted .ng-invalid {border: 1px solid red;}
</style>

Here i am adding a red color border to our required form fields. So angularJS add the class ‘ng-invalid’ automatically if the form field is not valid.

if($scope.userForm.$valid) {
    console.log('success');
}
Our Final Code Of AngularJS Form Validation
<html ng-app="app">
    <head>
        <title>AngularJS Validation</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <body ng-controller="myCtrl">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="bs-example">
                        <form name="userForm" ng-submit="addUser(userForm)" ng-class="{submitted:userformsubmit}" novalidate>
                            <div class="form-group">
                                <label for="fname">First Name</label>
                                <input type="text" class="form-control" id="fname" ng-model="userForm.fname" ng-minlength="5" ng-pattern="/^[a-zA-Z]*$/" placeholder="First Name" required>
                            </div>
                            <div class="form-group">
                                <label for="lname">Last Name</label>
                                <input type="text" class="form-control" id="lname" placeholder="Last Name" ng-model="userForm.lname" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Email" ng-model="userForm.email" required>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript">
            angular.module('app', []).
            controller('myCtrl', function($scope){
                $scope.addUser = function(user) {
                    $scope.userformsubmit = true;
                    if($scope.userForm.$valid) {
                        console.log('form is valid!');
                    }
 
                }
            });
        </script>
    </body>
</html>

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like