How do I trigger all validations when submit button is clicked?

Question

I've added validations for my form and I wanted it to trigger each and every validation when submit button is clicked. I tried googling for how to trigger them but it seems they are not working for me.

Here's my code for the form

<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails" novalidate ng-submit="CustomerDetails.$valid && AddCustomer()">
    <div class="form-group" ng-class="{'has-error': CustomerDetails.cname.$invalid && !CustomerDetails.cname.$pristine}">
        <label class="col-lg-2 col-md-3 control-label">Customer Name</label>
        <div class="col-lg-10 col-md-9">
            <input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname" required />
            <p ng-show="CustomerDetails.cname.$error.required && !CustomerDetails.cname.$pristine" class="help-block">Customer name required!</p>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.comname.$invalid && !CustomerDetails.comname.$pristine}">
        <label class="col-lg-2 col-md-3 control-label">Company Name</label>
        <div class="col-lg-10 col-md-9">
            <input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" required />
            <p ng-show="CustomerDetails.comname.$error.required && !CustomerDetails.comname.$pristine" class="help-block">Comapany name required!</p>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.ctel.$invalid && !CustomerDetails.ctel.$pristine}">
        <label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
        <div class="col-lg-10 col-md-9">
            <div class="input-group input-icon">
                <span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
                <input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel" required >
                <p ng-show="CustomerDetails.ctel.$error.required && !CustomerDetails.ctel.$pristine" class="help-block">Telephone number required!</p>
            </div>
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.email.$invalid && !CustomerDetails.email.$pristine}">
        <label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
        <div class="col-lg-10 col-md-9">
            <input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone@example.com" id="email" required >
            <p ng-show="CustomerDetails.email.$error.required && !CustomerDetails.email.$pristine" class="help-block">Email is required!</p>
            <p ng-show="CustomerDetails.email.$error.email && !CustomerDetails.email.$pristine" class="help-block">Please Enter valid email address.</p>                                 
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group">
        <div class="col-lg-9 col-sm-9 col-xs-12">
            <button name="btnSubmit" type="submit" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
            <button type="button" id="cancel" class="btn btn-default pad">Cancel</button>
        </div>
    </div>
</form>

UPDATE: I have change the code according to Adrian Brand but still no trigger. What am I doing wrong?

Here's my angularjs for the form. (controller)

(function () {
    'use strict';

    angular
        .module('efutures.hr.controllers.customer', [])
        .controller('AddCustomerController', AddCustomerController);

    AddCustomerController.$inject = ['$scope', '$location', '$rootScope', '$http', 'CustService'];

    function AddCustomerController($scope, $location, $rootScope, $http, CustService) {

        (function initController() {


        })();



        $scope.AddCustomer = function () {

            var CustomerDetails = {
                cname: $scope.CusDetails.cname,
                comname: $scope.CusDetails.comname,
                tel: $scope.CusDetails.tel,
                email: $scope.CusDetails.email

            };

            if ($scope.CustomerDetails.$valid) {

                CustService.Customer(CustomerDetails, function (res) {
                    console.log(res);

                    $.extend($.gritter.options, {
                        position: 'bottom-right',
                    });

                    if (res.data == 'success') {
                        $.gritter.add({

                            title: 'Success!',
                            text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
                            time: '',
                            close_icon: 'l-arrows-remove s16',
                            icon: 'glyphicon glyphicon-ok-circle',
                            class_name: 'success-notice'
                        });

                        $scope.CusDetails = {};
                        $scope.CustomerDetails.$setPristine();
                    }
                    else {
                        $.gritter.add({
                            title: 'Failed!',
                            text: 'Failed to add a new customer. Please retry.',
                            time: '',
                            close_icon: 'l-arrows-remove s16',
                            icon: 'glyphicon glyphicon-remove-circle',
                            class_name: 'error-notice'
                        });
                    }


                });
            }
        }
    }
})();

I even tried making the form submitted true , still didn't work. The only thing that worked for me is the disabling the button until its validated but that isn't the requirement. I want it to trigger when the submit form is clicked. Help would be greatly appreciated.

Answer 1

In the click event where you wanted to trigger the validation, add the following:

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

This works for me. To know more about this click here : https://code.angularjs.org/1.3.20/docs/api/ng/type/form.FormController

Answer 2

Your problem lies in the fact that your submit button is not contained in the form so the form never gets submitted. You are just running the controller method via a click handler.

Form validation is not a controller concern and has no place in the controller. It is purely a view concern.

In your form you put a ng-submit="CustomerDetails.$valid && AddCustomer()" and take the click handler off the submit button and place the button row within the form. This way the view will only submit if the form is valid. Do not pollute your controllers with form validation and keep it all contained in your view. You should look into the controller as syntax and then you will not even have access to the $scope in your controllers.