AngularJS form validation not functioning

Question

I'm doing something wrong but cant see what. I've followed the angular js docs and the validations are not working:

<form name="callbackForm" ng-submit="requestCallback()"> 
  <div class="col-md-3">
    <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
  </div>
  <div class="col-md-3">
    <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
  </div>
  <div class="col-md-3">
    <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
  </div>
  <div class="col-md-3">
    <p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
    <p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
  </div>
</form>

with a controller as follows:

'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {

    $scope.requestCallback = function () {

        alert("form callback");

    };
}]);

However, I can't get my error messages to appear. Also the ng-minlength are not restricting the form submission? Am I missing something simple here?

did you set the ng-controller directive to attach the controller to the form? — Hen Sapir
– Hen Sapir, Commented Jan 28, 2016 at 16:30

Daniel · Accepted Answer · 2016-01-28 16:48:20Z

Your code seems to work fine.

Regarding the submission restriction on error - you have to explicitly use angular's valiation by doing something like:

<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">

Here's a snippet:

function Ctrl($scope) {
  $scope.requestCallback = function() {
    alert("form callback");
  };
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<div ng-app>
  <div ng-controller="Ctrl">
    <form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
      <div class="col-md-3">
        <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
      </div>
      <div class="col-md-3">
        <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
      </div>
      <div class="col-md-3">
        <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
      </div>
      <div class="col-md-3">
        <p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
        <p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
        <p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
        <p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
      </div>
    </form>
  </div>
</div>

Pratap A.K · Accepted Answer · 2016-01-28 16:47:38Z

Your form is validating.. in order to call requestCallback() function, you need to bind your form to controller.

Wrap your form inside controller with ng-controller

<div ng-controller="footerController">

<form name="callbackForm" ng-submit="requestCallback()"> 
                <div class="col-md-3">
                    <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
                </div>
                <div class="col-md-3">
                    <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
                </div>
                <div class="col-md-3">
                    <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
                </div>
                <div class="col-md-3">
                    <p ng-show="callbackForm.name.$error.required"  || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
                    <p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
                </div>
            </form>

</div>

</div>

Collectives™ on Stack Overflow

AngularJS form validation not functioning

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related