angular form validation not working

Question

I have this simple form with a text box that is required and a save button.

<form role="form" name="frmVariableConfig" novalidate ng-submit="frmVariableConfig.$valid && vm.saveChanges()">                
    <input type="text" ng-model="vm.CurrCustomer.Name" name="txtCustomerName" class="form-control input-sm validate[required]" placeholder="txtCustomerName" check-validation>   
    <button type="submit" class="btn btn-sm text-right">Save</button>                
</form>

I'm using this directive to activate the Jquery Validation Engine

angular.module('app').directive('checkValidation', [
    function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModel) {
                element.closest('form').validationEngine(
                    {
                        promptPosition: 'centerRight',
                        scroll: true, prettySelect: true,
                        autoPositionUpdate: true,
                        //validateNonVisibleFields: true,
                        //autoHidePrompt: true,
                        autoHideDelay: 1000,
                        fadeDuration: 0.9
                    }
                );
            }
        };
    }]);

but it keeps on calling saveChanges() even if the text-box is empty. It should not call this function if the text-box is empty.

Please help.

Answer 1

In one project, the only way I found to solve this scenario was to pass the value of $valid to save method.

HTML

ng-submit="vm.saveChanges( frmVariableConfig.$valid )"

JS

$scope.saveChanges = function(valid) {  
  if(valid) {
    //do save  
  }
}