View Issue Detail

ID	Project	Category	Submitted / Last Updated
01021	UserSpice	Misc Code	2020-10-03 22:24:17 / 2021-04-17 09:47:33
Reported	Jim Boone	Assigned To	Unassigned
Priority	high	Reported	5.1.6
Status	closed	Resolution Version and Commit
Summary	HTML5 validation does not work when recaptcha is enabled
Description	HTML 5 form validation, specifically the &#039;required&#039; 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,&#039;bottom&#039;); &lt;?php require_once $abs_us_root.$us_url_root.&#039;users/includes/page_footer.php&#039;; // the final html footer copyright row + the external js calls ?&gt; &lt;?php if($settings-&gt;recaptcha &gt; 0){ ?&gt; -&lt;script src=&quot;https://www.google.com/recaptcha/api.js&quot; async defer&gt;&lt;/script&gt; -&lt;script&gt; - function submitForm() { - document.getElementById(&quot;payment-form&quot;).submit(); - } -&lt;/script&gt; +&lt;script src=&quot;https://www.google.com/recaptcha/api.js?render=&lt;?=$settings-&gt;recap_public;?&gt;&quot;&gt;&lt;/script&gt; + &lt;script&gt; + grecaptcha.ready(function () { + grecaptcha.execute(&quot;&lt;?=$settings-&gt;recap_public; ?&gt;&quot;, { action: &#039;contact&#039; }).then(function (token) { + var recaptchaResponse = document.getElementById(&#039;recaptchaResponse&#039;); + recaptchaResponse.value = token; + }); + }); + &lt;/script&gt; + &lt;?php } ?&gt; &lt;?php if($settings-&gt;auto_assign_un==0) { ?&gt; # 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. &lt;input type=&quot;hidden&quot; value=&quot;&lt;?=Token::generate();?&gt;&quot; name=&quot;csrf&quot;&gt; &lt;button class=&quot;submit btn btn-primary &quot; type=&quot;submit&quot; id=&quot;next_button&quot;&gt;&lt;i class=&quot;fa fa-plus-square&quot;&gt;&lt;/i&gt; &lt;?=lang(&quot;SIGNUP_TEXT&quot;);?&gt;&lt;/button&gt; &lt;?php if($settings-&gt;recaptcha == 1\|\| $settings-&gt;recaptcha == 2){ ?&gt; - &lt;div class=&quot;g-recaptcha&quot; data-sitekey=&quot;&lt;?=$settings-&gt;recap_public; ?&gt;&quot; data-bind=&quot;next_button&quot; data-callback=&quot;submitForm&quot;&gt;&lt;/div&gt; + &lt;input type=&quot;hidden&quot; name=&quot;g-recaptcha-response&quot; id=&quot;recaptchaResponse&quot;&gt; &lt;?php } ?&gt; &lt;/form&gt;&lt;br /&gt; &lt;/div&gt;

November 2021

This issue actually showed up in particular in a project I did recently. It relates to our implementation of ReCAPTCHA. We should overhaul this.
November 2021

The (poorly formated diff) will get the current implementation to work. v3 - compiles a score, giving you the ability to take other actions like requiring additional factors of authentication. The current implementation doesn't have a mechanism to do any of the step up authentication per page and, for what I need, may be a bit complicated. v2 invisible - seems to be what was intended
November 2021

Recaptcha being moved to a plugin