I've been following the AngularJS documentation, but I'm having trouble with my validations. The error messages are not showing up and the minimum length restrictions for the form fields 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>
This is my controller:
'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {
$scope.requestCallback = function () {
alert("form callback");
};
}]);
But for some reason, my error messages won't display and the ng-minlength
validation isn't preventing form submission. What could be causing this issue?