Move logic into a validate function

- Moved away from automatically handling for submissions since we can't guarantee event order
- Added a public validate and onValidSubmit function wrapper
- Updated the example

example.html

@@ -89,5 +89,12 @@
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="gatekeeper.js"></script>
+  <script>
+    $('form').on('submit', Gatekeeper.onValidSubmit(function(evt) {
+      alert('valid!');
+    }, function(evt) {
+      alert('invalid!');
+    }));
+  </script>
 </body>
 </html>

gatekeeper.css

@@ -3,5 +3,5 @@
 .form-submitted input:invalid,
 .form-submitted textarea:invalid,
 .form-submitted select:invalid {
-  border: 1px solid #b2182b;
+  border: 2px solid #b2182b;
 }

gatekeeper.js

@@ -32,23 +32,36 @@ var Gatekeeper = {};
     return invalidEls;
   };
 
-  // Bind to all forms in the document, forever
-  $(document).on('submit', 'form', function(evt) {
-    evt.preventDefault();
-
+  NS.validate = function(form) {
     // Get invalid elements from the form
-    var invalidEls = NS.getInvalidFormEls(this);
+    var invalidEls = NS.getInvalidFormEls(form);
 
     // Indicate that this form has been submitted
-    $(this).addClass('form-submitted');
+    $(form).addClass('form-submitted');
 
     if (invalidEls && invalidEls.length > 0) {
-      // Stops the submit event from triggering anywhere else
-      evt.stopImmediatePropagation();
-
       // Focus on the first invalid element
       invalidEls[0].focus();
       if (invalidEls[0].select) { invalidEls[0].select(); }
+
+      return false;
     }
-  });
+    return true;
+  };
+
+  NS.onValidSubmit = function(success, error) {
+    return function(evt) {
+      evt.preventDefault();
+
+      if (NS.validate(evt.target)) {
+        if (success) {
+          success.call(this, arguments);
+        }
+      } else {
+        if (error) {
+          error.call(this, arguments);
+        }
+      }
+    };
+  };
 }(Gatekeeper));