CODEWITHSUNDEEP
angularjsvalidation
Atul Vani
Atul Vani

Reputation: 61

Angular JS form validation does not seem to work

Can someone please tell me why my validations are not working. I followed many blogs and can't seem to debug it on my own.

<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
     <h1>Test {{name}}!!</h1>

    <form name="loginForm" action="login" novalidate>
        <input type="email" name="email" placeholder="email" required/>
        <input type="password" name="password" placeholder="password" required/>
        <button type="submit" ng-disabled="loginForm.$invalid">Login</button>
        <p ng-show="loginForm.$invalid">Please fix your form.</p>
        <p ng-show="loginForm.email.$invalid">Please fix your email.</p>
        <p ng-show="loginForm.password.$invalid">Please fix your password.</p>
    </form>
</div>
<script>
    var testapp = angular.module('testapp', []);
    var testCtrl = function($scope) {
        $scope.name = 'validation';
    };
</script>

http://jsfiddle.net/xFnx8/3/

Upvotes: 2

Views: 446

Answers (3)

Julien
Julien

Reputation: 2246

You must add an ng-model to your inputs so the form validation of angular can kick in.

Javascript

  var testapp = angular.module('testapp', []);
  var testCtrl = function ($scope) {
      $scope.name = 'validation';
      $scope.user = {};
  };

HTML modification

    <input type="email" name="email" placeholder="email" ng-model='user.email' required/>
    <input type="password" name="password" placeholder="password" ng-model='user.password' required/>

Working demo

Upvotes: 1

Nikola Yovchev
Nikola Yovchev

Reputation: 10266

http://jsfiddle.net/6DzR5/

Yo, I fixed your fiddle.

You need to add your inputs as ng-model:

  <input type="email" name="email" placeholder="email" data-ng-model="email" data-ng-required="true"/>
  <input type="password" name="password" placeholder="password" data-ng-model="password" data-ng-required="true"/>

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67336

In order for Angular to track changes on form inputs, they need to be defined as ng-model properties on the scope.

So, your demo will work if you add the appropriate ng-model attributes:

<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
     <h1>Test {{name}}!!</h1>

    <form name="loginForm" action="login" novalidate>
        <input type="email" name="email" ng-model="email" placeholder="email" required/>
        <input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
        <button type="submit" ng-disabled="loginForm.$invalid">Login</button>
        <p ng-show="loginForm.$invalid">Please fix your form.</p>
        <p ng-show="loginForm.email.$invalid">Please fix your email.</p>
        <p ng-show="loginForm.password.$invalid">Please fix your password.</p>
    </form>
</div>
<script>
    var testapp = angular.module('testapp', []);
    var testCtrl = function($scope) {
        $scope.name = 'validation';
    };
</script>

Here is a working fiddle.

Upvotes: 3

Related Questions