添加Invisible reCAPTCHA v2后表单必填字段校验失效问题咨询

Hey there, I’ve run into this exact issue before—Invisible reCAPTCHA can hijack the form submission flow and skip browser-native required field checks if you’re not careful. Let’s break down why this is happening and how to fix it.

Why the Validation Broke #

Invisible reCAPTCHA’s default behavior when using data-callback is to automatically submit the form once the captcha is verified. Since this submission is triggered via JavaScript (not a native user click on the submit button), browsers skip their built-in required field validation. That’s why Chrome stopped showing those "field can’t be empty" prompts.

The Solution: Take Control of the Flow #

We need to separate the captcha verification from the form submission, so we can run validation first. Here’s how to do it step by step:

1. Adjust your HTML to prevent auto-submission

   • Don’t bind the reCAPTCHA directly to your submit button. Instead, use a regular button to trigger the captcha, and keep the reCAPTCHA in a separate container.
   • Make sure your form has an ID so we can target it easily.

   Example HTML:

   <form id="quote-form">
     <input type="text" name="fullName" placeholder="Your Name" required>
     <input type="email" name="email" placeholder="Your Email" required>
     <!-- Other form fields -->
     
     <!-- Regular button to trigger captcha -->
     <button type="button" id="submit-quote">Send Quote Request</button>
     
     <!-- Invisible reCAPTCHA container -->
     <div class="g-recaptcha" 
          data-sitekey="YOUR_SITE_KEY" 
          data-callback="handleCaptchaSuccess" 
          data-size="invisible">
     </div>
   </form>
   

2. Write JavaScript to handle validation and AJAX

   • First, add a click listener to your button that triggers the reCAPTCHA verification.
   • In the captcha success callback, run form validation first (using browser-native checks or your own logic), then send the AJAX request only if validation passes.

   Example JavaScript:

   // Trigger reCAPTCHA when the button is clicked
   document.getElementById('submit-quote').addEventListener('click', function() {
     grecaptcha.execute();
   });
   
   // Captcha success callback
   function handleCaptchaSuccess(token) {
     const form = document.getElementById('quote-form');
     
     // Run native form validation
     if (form.checkValidity()) {
       // Validation passed—send AJAX request
       fetch('/your-submission-endpoint', {
         method: 'POST',
         body: new FormData(form),
         // Add any additional headers if needed
         headers: {
           'X-Requested-With': 'XMLHttpRequest'
         }
       })
       .then(response => response.json())
       .then(data => {
         // Handle successful submission (e.g., show a success message)
         console.log('Submission successful:', data);
         // Reset captcha for future submissions
         grecaptcha.reset();
       })
       .catch(error => {
         // Handle errors
         console.error('Submission failed:', error);
         grecaptcha.reset();
       });
     } else {
       // Validation failed—show browser's native error prompts
       form.reportValidity();
       // Reset captcha so user can try again
       grecaptcha.reset();
     }
   }
   

Key Notes #

• form.checkValidity() checks if all required fields are filled and meet their constraints (like valid email format).
• form.reportValidity() triggers the browser’s native error messages, just like when you submit a form normally.
• Always reset the reCAPTCHA with grecaptcha.reset() after submission (success or failure) so users can submit the form again if needed.

If you prefer to use custom validation messages instead of the browser’s defaults, you can replace checkValidity() and reportValidity() with your own logic to check each field and show custom alerts.

内容的提问来源于stack exchange，提问作者DarkEyeDragon