How to do validation in angularjs?

Question

I am new to validation in angularjs and am trying to do it. Is it correct? Can anyone tell me?

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.clickMe = function(){
if($('#myForm .required').length==0){
alert("enter all details")
}

}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="myForm" >
<input type="text" class="required">
<input type="date" class="required">
<select class="required">
<option>AAA</option>
<option>BBB</option>
</select>
</form>
<button ng-click="clickMe()">submit</button>
</div>

Sachin G. · Answer 1 · 2017-11-28T06:50:09.620

I have added validation in your code for required field. To implement other validation please refer angular docs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="myForm" name="form1" ng-submit="form1.$valid && clickMe()">
<input type="text" class="required" name="text1" ng-model="model1" required>
<span ng-show="form1.text1.$error.required">Required</span>
<input type="date" class="required" name="text2" ng-model="model2" required>
<span ng-show="form1.text2.$error.required">Required</span>
<select class="required">
<option>AAA</option>
<option>BBB</option>
</select>
</form>
<button type="submit">submit</button>
</div>

score 1 · Answer 2 · answered Nov 28 '17 at 06:55

Try using angular form validations. Here is an example.

var app = angular.module('myApp', [])
app.controller('myController', function ($scope) {
    $scope.clickMe = function () {
        alert("My Form is valid");
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <form id="myForm" name="myUserForm">
        <input ng-model="mytext" type="text" class="required" required>
        <input ng-model="mydate" type="date" class="required" required>
        <select class="required" ng-model="myoption">
            <option>AAA</option>
            <option>BBB</option>
        </select>
        <button ng-click="clickMe()" ng-disabled="myUserForm.$invalid">submit</button>
    </form>
</div>

You can see an example here

score 1 · Answer 3 · answered Nov 28 '17 at 07:26

Use validaton of angular:

var app = angular.module('myApp', [])
app.controller('myController', function ($scope) {
    $scope.clickMe = function () { 
        if($scope.myForm.$valid) {
        alert("My Form is valid");
       }
    }
})

Now, because ng-model is a Two-Way-Binding

You will have to supply name as well for your inputs so the validation will work:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <form id="myForm" name="myUserForm">
        <input ng-model="mytext" type="text" name="mytext" class="required" required>
        <input ng-model="mydate" type="date" name="mydate" class="required" required>
        <select class="required" ng-model="myoption" name="myoption">
            <option>AAA</option>
            <option>BBB</option>
        </select>
        <button ng-click="clickMe()">submit</button>
    </form>
</div>

How to do validation in angularjs?

3 Answers3