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. · Accepted Answer · 2017-11-28 06:50:09Z

1

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>

edited Nov 28, 2017 at 6:50

answered Nov 28, 2017 at 6:41

Sachin G.

1551 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitheesh · Accepted Answer · 2017-11-28 06:55:31Z

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

Barr J · Accepted Answer · 2017-11-28 07:26:19Z

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>

Collectives™ on Stack Overflow

How to do validation in angularjs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related