View Issue Detail

HTML 5 form validation, specifically the 'required' element, does not work on join.php when RECAPTCHA is enabled. 

​

To reproduce:

 1) With recaptcha disabled, go to the join page and enter a valid first name, leave the last name blank, enter a valid password and press submit.  HTML5 form validation will give a pop-up asking to fill out the Last Name field.  

2) With recaptcha enabled and using valid API credentials, go to the join page and enter a valid first name, leave the last name blank, enter a valid password and press submit.  The form is submitted and the POST validation code will show an error that some fields were not filled out.  This is unexpected behavior.

​

Expected behavior

1) With recaptcha enabled, go to the join page and enter a valid first name, leave the last name blank, enter a valid password and press submit.  HTML5 form validation will give a pop-up asking to fill out the Last Name field.  Filling all fields will allow the form to be submitted.

​

Why is this important?

When adding custom fields via usersc/scripts/additional_join_form_fields.php and usersc/scripts/during_user_creation.php the user is created before any custom validation can be performed in usersc/scripts/during_user_creation.php.  The only field validation that can be done for custom fields prior to the user being created is via the HTML5 field validation.

​

The following changes to users/join.php and users/views/_join.php fix the issue.  The changes are based on the production release of UserSpice 5.1.6 

# diff  a/users/join.php b/users/join.php

index 29ef0b4..1b0a001 100644

--- a/users/join.php

+++ b/users/join.php

@@ -289,12 +289,16 @@ includeHook($hooks,'bottom');

 <?php require_once $abs_us_root.$us_url_root.'users/includes/page_footer.php'; // the final html footer copyright row + the external js calls ?>

​

 <?php if($settings->recaptcha > 0){ ?>

-<script src="https://www.google.com/recaptcha/api.js" async defer></script>

-<script>

-    function submitForm() {

-        document.getElementById("payment-form").submit();

-    }

-</script>

+<script src="https://www.google.com/recaptcha/api.js?render=<?=$settings->recap_public;?>"></script>

+    <script>

+        grecaptcha.ready(function () {

+            grecaptcha.execute("<?=$settings->recap_public; ?>", { action: 'contact' }).then(function (token) {

+                var recaptchaResponse = document.getElementById('recaptchaResponse');

+                recaptchaResponse.value = token;

+            });

+        });

+    </script>

+

 <?php } ?>

 <?php if($settings->auto_assign_un==0) { ?>

​

​

# diff a/users/views/_join.php b/users/views/_join.php

index 13e7296..5c0eeaf 100644

--- a/users/views/_join.php

+++ b/users/views/_join.php

@@ -177,7 +177,7 @@ Special thanks to John Bovey for the password strenth feature.

       <input type="hidden" value="<?=Token::generate();?>" name="csrf">

       <button class="submit btn btn-primary " type="submit" id="next_button"><i class="fa fa-plus-square"></i> <?=lang("SIGNUP_TEXT");?></button>

       <?php if($settings->recaptcha == 1|| $settings->recaptcha == 2){ ?>

-        <div class="g-recaptcha" data-sitekey="<?=$settings->recap_public; ?>" data-bind="next_button" data-callback="submitForm"></div>

+         <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse">

       <?php } ?>

     </form><br />

   </div>