angularjs - Validating form on submit in angular -
hello trying make validation display on form submit validation not work, form gets sent anyway. form:
<form class="form-horizontal col-md-10" role="form" name="authenticationform" ng-controller="authenticationcontroller 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"> email address 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 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 password?</a> </div> </div> </form> this controller function:
$scope.authenticate = function(isvalid) { // settting submitted true $scope.submitted = true; // check make sure form 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 error occurs // or server returns response error status. //alert(data); }); } }; can please point out doing wrong here? thanks. :)
you should able check $scope.authenticationform.$valid , prevent xhr, , can visually set submit button ng-disabled="authenticationform.$invalid" can't click button until it's valid. disabled setting won't prevent submitting form other ways (enter key, etc).
have checked boolean coming you? should false there's validation error.
Comments
Post a Comment