EDIT:

I've added a JsFiddle so you can easily troubleshoot instead of having to set up the environment yourself. As you can see, validation is done on the Email field even before the blur event on the input element, which was triggered by the $scope.Email being changed. If you comment out the ng-show="!mainForm.validate()" on the <p> element, you'll see that the issue doesn't take place.

I am using the Angular implementation of jQuery Validate, and I am in need of the ability to check if a form is valid without showing the error messages. The standard solution I've seen online is to use jQuery Validate's checkForm() function, like this:

$('#myform').validate().checkForm()

However, the Angular wrapper I'm using doesn't currently implement the checkForm function. I have been trying to modify the source code to bring it in, and I'm afraid I'm in over my head. The code is small and simple enough that I'll paste it here:

(function (angular, $) { angular.module('ngValidate', []) .directive('ngValidate', function () { return { require: 'form', restrict: 'A', scope: { ngValidate: '=' }, link: function (scope, element, attrs, form) { var validator = element.validate(scope.ngValidate); form.validate = function (options) { var oldSettings = validator.settings; validator.settings = $.extend(true, {}, validator.settings, options); var valid = validator.form(); validator.settings = oldSettings; // Reset to old settings return valid; }; form.numberOfInvalids = function () { return validator.numberOfInvalids(); }; //This is the part I've tried adding in. //It runs, but still shows error messages when executed. //form.checkForm = function() { // return validator.checkForm(); //} } }; }) .provider('$validator', function () { $.validator.setDefaults({ onsubmit: false // to prevent validating twice }); return { setDefaults: $.validator.setDefaults, addMethod: $.validator.addMethod, setDefaultMessages: function (messages) { angular.extend($.validator.messages, messages); }, format: $.validator.format, $get: function () { return {}; } }; }); }(angular, jQuery));

I want to be able to use it to show or hide a message, like this:

<p class="alert alert-danger" ng-show="!mainForm.checkForm()">Please correct any errors above before saving.</p>