Add required to opt out of validation

README.md

@@ -70,6 +70,13 @@ var app = angular.module('myApp', ['vcRecaptcha']);
 
 Here, the `key` attribute is passed to the directive's scope, so you can use either a property in your scope or just a hardcoded string. Be careful to use your public key, not your private one.
 
+Form Validation
+---------------
+**By default**, if placed in a [form](https://docs.angularjs.org/api/ng/directive/form) using [formControl](https://docs.angularjs.org/api/ng/type/form.FormController) the captcha will need to be checked for the form to be valid.
+If the captcha is not checked (if the user has not checked the box or the check has expired) the form will be marked as invalid. The validation key is `recaptcha`.
+You can **opt out** of this feature by setting the `required` attribute to `false` or a scoped variable 
+that will evaluate to `false`. Any other value, or omitting the attribute will opt in to this feature.
+
 Response Validation
 -------------------
 

src/directive.js

@@ -20,6 +20,7 @@
                 theme: '=?',
                 size: '=?',
                 tabindex: '=?',
+                required: '=?',
                 onCreate: '&',
                 onSuccess: '&',
                 onExpire: '&'
@@ -31,7 +32,10 @@
 
                 scope.widgetId = null;
 
-                var sessionTimeout;
+                if(ctrl && angular.isDefined(attrs.required)){
+                    scope.$watch('required', validate);
+                }
+
                 var removeCreationListener = scope.$watch('key', function (key) {
                     if (!key) {
                         return;
@@ -44,37 +48,25 @@
                     var callback = function (gRecaptchaResponse) {
                         // Safe $apply
                         $timeout(function () {
-                            if(ctrl){
-                                ctrl.$setValidity('recaptcha',true);
-                            }
                             scope.response = gRecaptchaResponse;
+                            validate();
+
                             // Notify about the response availability
                             scope.onSuccess({response: gRecaptchaResponse, widgetId: scope.widgetId});
                         });
-
-                        // captcha session lasts 2 mins after set.
-                        sessionTimeout = $timeout(function (){
-                            if(ctrl){
-                                ctrl.$setValidity('recaptcha',false);
-                            }
-                            scope.response = "";
-                            // Notify about the response availability
-                            scope.onExpire({widgetId: scope.widgetId});
-                        }, 2 * 60 * 1000);
                     };
 
                     vcRecaptcha.create(elm[0], key, callback, {
 
                         stoken: scope.stoken || attrs.stoken || null,
                         theme: scope.theme || attrs.theme || null,
                         tabindex: scope.tabindex || attrs.tabindex || null,
-                        size: scope.size || attrs.size || null
+                        size: scope.size || attrs.size || null,
+                        'expired-callback': expired
 
                     }).then(function (widgetId) {
                         // The widget has been created
-                        if(ctrl){
-                            ctrl.$setValidity('recaptcha',false);
-                        }
+                        validate();
                         scope.widgetId = widgetId;
                         scope.onCreate({widgetId: widgetId});
 
@@ -91,14 +83,24 @@
                     // reset the validity of the form if we were removed
                     ctrl.$setValidity('recaptcha', null);
                   }
-                  if (sessionTimeout) {
-                    // don't trigger the session timeout if we are no longer active
-                    $timeout.cancel(sessionTimeout);
-                    sessionTimeout = null;
-                  }
+
                   cleanup();
                 }
 
+                function expired(){
+                    scope.response = "";
+                    validate();
+
+                    // Notify about the response availability
+                    scope.onExpire({widgetId: scope.widgetId});
+                }
+
+                function validate(){
+                    if(ctrl){
+                        ctrl.$setValidity('recaptcha', scope.required === false ? null : Boolean(scope.response));
+                    }
+                }
+
                 function cleanup(){
                   // removes elements reCaptcha added.
                   angular.element($document[0].querySelectorAll('.pls-container')).parent().remove();