Validating form on submit in angular - angularjs

Question

Hello i am trying to make my validation display on form submit but validation does not work, form gets sent anyway. This is my form:
<form class="form-horizontal col-md-10" role="form" name="authenticationForm" ng-controller="AuthenticationController as authentication" ng-submit="authenticate(authenticationForm.$valid)" novalidate>
<hr>
<br>
<div class="form-group" ng-class="{ 'has-error' : authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted }">
<div class="col-md-4">
<label for="email">Email: </label>
</div>
<div class="col-md-6">
<input type="email" id="email" name="email" ng-model="email" class="form-control" ng-required/>
<p ng-show="authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted" class="help-block">
Your email address is required.
</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted }">
<div class="col-md-4">
<label for="password">Password</label>
</div>
<div class="col-md-6">
<input type="password" id="password" name="password" ng-model="password" class="form-control" ng-required/>
<p ng-show="authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted" class="help-block">
Password is required.
</p>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<span class="help-block errorMessages" ng-show="user.input.errors !== undefined">
<div class="alert alert-danger">
<ul class="list">
<li ng-repeat="error in user.input.errors">
<i class="fa fa-times"></i> <% error %>
</li>
</ul>
</div>
</span>
<div class="form-group">
<div class="col-md-12">
<br/>
<hr>
<button class="big-red-button" type="submit">Login <i class="glyphicon glyphicon-chevron-right"></i></button>
<a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a>
</div>
</div>
</form>
This is my controller function:
$scope.authenticate = function(isValid) {
// settting submitted to true
$scope.submitted = true;
// check to make sure the form is completely valid
if (isValid) {
var req = {
method: 'POST',
url: '/auth/login',
headers: {
'X-XSRF-Token': $("meta[name='csrf_token']").attr("content")
},
data: {
email: $scope.email,
password: $scope.password
}
}
$http(req)
.success(function (data, status, headers, config) {
if (data.url !== undefined)
{
window.location.href = data.url;
}
})
.error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
//alert(data);
});
}
};
Can someone please point out what i am doing wrong here? Thanks. :)

Answer 1

You should be able to check $scope.authenticationForm.$valid and prevent the xhr, and you can also visually set the submit button to ng-disabled="authenticationForm.$invalid" so they can't click the button until it's valid. That disabled setting won't prevent submitting the form other ways (enter key, etc).
Have you checked the boolean coming to you? It should be false is there's a validation error.

Answer 2

As you are using controllerAs syntax then you should use each ng-model as
authentication.email & authentication.password
Email Field
<input type="email" id="email" name="email" ng-model="authentication.email"
class="form-control" ng-required/>
Password Field
<input type="password" id="password" name="password" ng-model="authentication.password"
class="form-control" ng-required/>
then inside controller you could get this value by this.email & this.password

Answer 3

That happened to me too. Change ng-required to required, make sure the isValid boolean is actually false if it's not a valid form and take out the novalidate in the form element.
Sometimes the angular $valid is not always accurate. Also, I think you should have put ng-required="true" or some function that returns true, if you are using ng-required.
Check out this article: http://arnaldocapo.com/blog/post/detect-if-html-5-validation-ui-is-present/53

Answer 4

Just replace every where ng-required to required like:
<input type="text" required/>
and also set ng-controller="AuthenticationController " instead of
ng-controller="AuthenticationController as authentication"