There is no client side validation

[blovia22]

Describe the bug If I fill out all the fields of my form, except the captcha, there is no client side validation. The browser goes to the server, where I can use ModelState.IsValid to find the error. But I would like to prevent the browser going to the server.

To Reproduce Steps to reproduce the behavior:

1. Install the product.
2. In program.cs, add builder.Services.AddReCaptcha(builder.Configuration.GetSection("ReCaptcha"));
3. In appsetting.json, add

"ReCaptcha": {
  "SiteKey": "my site key",
  "SecretKey": "my secret key",
  "Version": "v2", // The ReCaptcha version to use, can be v2, v2invisible or v3
  "UseRecaptchaNet": false, // Value whether to use google recaptcha or recaptcha.net
  "ScoreThreshold": 0.5 // Only applicable for recaptcha v3, specifies the score threshold when it is considered successful
}

4. In .cshtml, add @using AspNetCore.ReCaptcha and @Html.ReCaptcha() (this one inside the form)
5. In .cshtml.cs, add [ValidateReCaptcha] just above public class contactModel : PageModel
6. In .cshtml.cs, in the OnPost() action, add

if (!ModelState.IsValid)
{
   TempData["mensajeError"] = "An error ocurred, did you solve the captcha?";
   return Page();
}

Expected behavior It would be nice to have an option to add an asp-validation-for tag or an asp:RequiredFieldValidator tag in order to add client-side validation for the captcha.

Or is there a way with javascript to check that the captcha was solved and if it wasn't, show a red message below the captcha without having the browser go back to the server?

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version: 102.0.1245.44 (Official build) (64-bit)

[parkinsona]

I also have this issue in windows 10, chrome.

I would have thought it would still do client side validation?

[parkinsona]

I found a workaround for this, after spending more time getting my head around recaptcha3.

I added the following script to ensure if would

• Fire client side validation before submitting
• Waits for the response to be written to the hidden field before heading off to the server.

`$(document).ready(function () {

$("#submitButton").click(function (event) {
    event.preventDefault();

    if ($("#frmUserNameEntry").valid()) {
        var recaptchaWait = setInterval(() => {
            if ($("input[name='g-recaptcha-response']:first").val() == "") {
                console.log("recaptcha not ready");
            }
            else {
                console.log("recaptcha ready to proceed.");
                clearInterval(recaptchaWait);
                document.forms[0].submit();
            }


        }, 100);
    }
    else {
        console.log("form errr");
    }
});

});`