How to submit form after validation in angularjs?

Question

var app = angular.module('formExample', []);
app.controller('FormCtrl', function ($scope, $http) {
    $scope.data = {};
        $scope.submitForm = function() {
            formData = $scope.regform;
                console.log("posting data....");
                $http({ url: '/',data: $scope.regform, method: 'post' }).success();
                console.log(formData);
        };
         $scope.reset = function(form) {
            if (form) {
                    form.$setPristine();
                        form.$setUntouched();
                }
                $scope.user = angular.copy($scope.data);
        };
                $scope.reset();
});

This is my JavaScript code. It submit form along with validation. I need only submit form after validation done. And the reset button not working properly.

Click here plnkr example

possible duplicate of [show validation error messages on submit in angularjs](http://stackoverflow.com/questions/18798375/show-validation-error-messages-on-submit-in-angularjs) — harishr, Dec 09 '14 at 05:31

score 1 · Accepted Answer · edited May 23 '17 at 12:27

you can rather create a directive for this purpose

code below answer is copied from here, (copy pasted as link only answers are not allowed)...

 var app = angular.module('plunker', []);

 var ValidSubmit = ['$parse', function ($parse) {
        return {
            compile: function compile(tElement, tAttrs, transclude) {
                return {
                    post: function postLink(scope, element, iAttrs, controller) {
                        var form = element.controller('form');
                        form.$submitted = false;
                        var fn = $parse(iAttrs.validSubmit);
                        element.on('submit', function(event) {
                            scope.$apply(function() {
                                element.addClass('ng-submitted');
                                form.$submitted = true;
                                if(form.$valid) {
                                    fn(scope, {$event:event});
                                }
                            });
                        });
                    }
                }
            }
        }
    }]
    app.directive('validSubmit', ValidSubmit);

and then in html

<form class="form-horizontal" role="form" name="form" novalidate valid-submit="connect()">
  <div class="form-group">
    <div class="input-group col col-sm-11 col-sm-offset-1">
      <span class="input-group-addon input-large"><i class="glyphicon glyphicon-envelope"></i></span>
      <input class="input-large form-control" type="email" id="email" placeholder="Email" name="email" ng-model="email" required="required">
    </div>
    <p class="col-sm-offset-3 help-block error" ng-show="form.$submitted && form.email.$error.required">please enter your email</p>
    <p class="col-sm-offset-3 help-block error" ng-show="form.$submitted && form.email.$error.email">please enter a valid email</p>
  </div>
</form>

The PLUNKER LINK to check this

How to submit form after validation in angularjs?

1 Answers1