pTutorial

New way to learn Programming

AngularJS Form Custom Validation

AngularJS form validation Example

AngularJS custom validation in controller : angularjs form validation in controller with bootstrap form and separate JS file (Angular app). Using the code below you can validate form in controller, form field or element may be varies according to your need.

Form validation play important role in Computer Science or WEB Development.

HTML for get Data on controller

<html>
<head>
<link href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://www.ptutorial.com/angularjs/
angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="app-angularjs-form-validation-on-submit.js"></script>
</head> 
<body>
<div ng-app="ukapp">
<div ng-controller="ukCtrl" ng-cloak> 
<div class="clear"></div>
<div class="container-fluid">
<div class="row form-list-row mrg-top">

<div class="col-xs-12 col-sm-12 col-md-8 no-rpad">
<div class="row com-marg">
<div class="col-xs-12 col-sm-12 col-md-12">
<h2>AngularJS Bootstarp dynamic form example</h2>
<div class="alert alert-{{className}} fade in "ng-show="msgflag">{{msgString}}</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group">
<h5><span style="color: red;"><sup>*</sup> 
</span>Customer Care Number</h5>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 ">
<input type="text" class="form-control" name="phone_text" 
ng-model="tempData.customer_care_number" title="Customer Care Number" placeholder="99999999">
</div>

</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>Sec. Customer Care Number</h5>
<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12">
<input type="text" class="form-control" id="sec_phone" 
ng-model="tempData.sec_customer_care_number" name="secondary_phone_text" 
title="Secondary Customer Care Phone No" placeholder="9999999999">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5><span style="color: red;"><sup>*</sup> 
</span>Email Address</h5>
<input type="text" class="form-control" name="email_text" ng-model="tempData.email_address" 
title="Email address" placeholder="abc@xyz.com">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 com-marg">
<h5>From Email <span style="font-size: 11px;">
(Will be used to send email)</span></h5>
<input type="text" class="form-control" name="from_email" 
ng-model="tempData.from_email_address" title="From Email" placeholder="abc@xyz.com">
</div>

</div>

<div class="clear"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 com-marg">
<a class="btn btn-default"  ng-click="saveCustomerData()">Save</a> 
<a class="btn btn-danger" href="">Cancel</a></div>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-6 com-marg bg-success"
ng-show="flag">{{tempData}}</div>
</div>

</div>

</div>

</div>
</div>
</div>
</body>
</html>

AngularJS get data on controlle JS

var ukapp = angular.module('ukapp', []);
ukapp.controller('ukCtrl', function ($scope) {
    $scope.tempData = {};
    $scope.tempData.customer_care_number = '';
    $scope.tempData.sec_customer_care_number = '';
    $scope.tempData.email_address = '';
    $scope.tempData.from_email_address = '';
    $scope.saveCustomerData = function () {
        if ($scope.tempData.customer_care_number == "") {
            $scope.msgString = "Please enter Customer Care Number!";
            $scope.className = 'danger';
            $scope.msgflag = true;
        } else if ($scope.tempData.email_address == "") {
            $scope.msgString = "Please enter  Email Address!";
            $scope.className = 'danger';
            $scope.msgflag = true;
        }else{
             $scope.msgflag = false;
        }
        if(!$scope.msgflag){
 console.log($scope.tempData);
 alert("You can see the data on firebug or inspect");
        }
    }

    $scope.remove = function () {
        delete $scope.tempData;
    }
});
ukapp.filter('capitalize', function () {
    return function (input) {
        return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
    };
});

Download

See Also


QUOTES OF THE DAY

Whenever man commits a crime,heaven finds a witness.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER