title: How to use the Angular jQuery Validate's checkForm() function
body: <h3>EDIT:</h3>
  <p><a href="https://jsfiddle.net/stamminator/0z99py3o/" rel="noreferrer">I've added a JsFiddle</a> 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 <code>blur</code> event on the <code>input</code> element, which was triggered by the <code>$scope.Email</code> being changed. If you comment out the <code>ng-show=&quot;!mainForm.validate()&quot;</code> on the <code>&lt;p&gt;</code> element, you'll see that the issue doesn't take place.</p>
  <hr />
  <p>I am using the <a href="https://github.com/jpkleemans/angular-validate" rel="noreferrer">Angular implementation of jQuery Validate</a>, 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 <code>checkForm()</code> function, like this:</p>
  <pre><code>$('#myform').validate().checkForm()
  </code></pre>
  <p>However, the Angular wrapper I'm using doesn't currently implement the <code>checkForm</code> 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:</p>
  <pre><code>(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));
  </code></pre>
  <p>I want to be able to use it to show or hide a message, like this:</p>
  <pre><code>&lt;p class=&quot;alert alert-danger&quot; ng-show=&quot;!mainForm.checkForm()&quot;&gt;Please correct any errors above before saving.&lt;/p&gt;
  </code></pre>
  <p>The reason I don't just use <code>!mainForm.validate()</code> is because that causes the error messages to be shown on elements before they are &quot;blurred&quot; away from, which is what I'm trying to avoid. Can anyone help me implement the <code>checkForm()</code> function into this angular directive?</p>