如何将表单中的reCAPTCHA提交按钮与表单验证提交按钮合并为一个按钮

Hey there! Let's fix this so you have one button that handles both jQuery form validation and reCAPTCHA verification. The issue right now is that your reCAPTCHA button skips the validation, and your validation button skips reCAPTCHA. Here's how to tie them together properly:

Step 1: Clean up the form buttons #

First, remove that extra "Make an offer" submit button—we only need one button. Then modify your reCAPTCHA button to act as a regular button (not a submit) so we can control its behavior:

<!-- Replace your two buttons with this single button -->
<button id="submit-btn" class="btn text-white btn-lg bg-primary btn-block">Make an offer</button>

Step 2: Update the reCAPTCHA logic #

We'll use explicit reCAPTCHA execution instead of the auto-binding on the button. This lets us run form validation first, then trigger reCAPTCHA only if the form is valid.

Modify your reCAPTCHA script tag to load with render=explicit so we can control it:

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

Then add a script to initialize reCAPTCHA and bind the button click event:

// Initialize reCAPTCHA when the API loads
grecaptcha.ready(function() {
  // Render the invisible reCAPTCHA widget tied to our button
  const recaptchaWidget = grecaptcha.render('submit-btn', {
    'sitekey': 'my-site-key', // Replace with your actual site key
    'size': 'invisible',
    'callback': onSubmit // Callback to run after reCAPTCHA passes
  });

  // Handle button click: first validate form, then run reCAPTCHA
  document.getElementById('submit-btn').addEventListener('click', function() {
    // Trigger jQuery form validation
    if ($("#main-offer-form").valid()) {
      // Form is valid—execute reCAPTCHA
      grecaptcha.execute(recaptchaWidget);
    }
  });
});

// Keep your existing onSubmit callback to submit the form after reCAPTCHA passes
function onSubmit(token) {
  document.getElementById("main-offer-form").submit();
}

Step 3: Verify your jQuery validation setup #

Your existing validation rules look solid, but double-check that each required input has a matching name attribute (your code already covers this, so you're good to go).

Full Modified Code #

Here's the complete updated HTML with all changes applied:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sales Inquiry || dontmissthebus.co.uk</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:300,700" rel="stylesheet">
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
  <link rel="stylesheet" href="css/style.css" />
  <!-- Load reCAPTCHA with explicit render control -->
  <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <script>
    // Initialize reCAPTCHA and button logic
    grecaptcha.ready(function() {
      const recaptchaWidget = grecaptcha.render('submit-btn', {
        'sitekey': 'my-site-key', // Replace with your real site key
        'size': 'invisible',
        'callback': onSubmit
      });

      document.getElementById('submit-btn').addEventListener('click', function() {
        if ($("#main-offer-form").valid()) {
          grecaptcha.execute(recaptchaWidget);
        }
      });
    });

    function onSubmit(token) {
      document.getElementById("main-offer-form").submit();
    }

    // Your existing jQuery validation code
    $( "#main-offer-form" ).validate({
      errorClass: 'form-control-feedback',
      errorElement: 'div',
      highlight: function(element) {
        $(element).parents(".form-group").addClass("has-danger");
      },
      unhighlight: function(element) {
        $(element).parents(".form-group").removeClass("has-danger");
      },
      rules: {
        name: 'required',
        email: {
          required: true,
          email: true
        },
        phone: {
          required: true,
          minlength:10,
          maxlength:17
        },
        price: "required",
        comments: {
          maxlength: 500
        }
      },
      messages: {
        name: 'Please enter your name.',
        email: {
          required: 'You can not leave this empty.',
          email: 'Please enter a valid email address.'
        },
        phone: {
          required: 'You can not leave this empty.',
          minlength: 'Phone number should be min 10 digits.',
          maxlength: 'Phone number should be max 17 digits.'
        },
        price: 'Please enter offered price.',
        comments: {
          maxlength: 'Message length must be less than 500 character.'
        }
      }
    });
  </script>
</head>
<body>
  <section class="bg-alt hero p-0">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 bg-faded text-center col-fixed">
          <div class="vMiddle">
            <h3 class="pt-4 h2">
              <span class="text-green">dontmissthebus.co.uk</span>
              <br>
              <small>available for sale</small>
            </h3>
            <p class="mt-4">
              To make an offer either fill out the form, or go to our main
              <a href="https://dn.avbus.uk/index.php/2021/10/14/dontmissthebus-co-uk/">website</a>
            </p>
            <div class="row d-md-flex text-center justify-content-center text-primary action-icons">
            </div>
          </div>
        </div>
        <div class="col-sm-6 offset-sm-6">
          <section class="bg-alt">
            <div class="container">
              <div class="row height-100">
                <div class="col-sm-10 offset-sm-1 mt-2">
                  <form id="main-offer-form" action="contact.php" method="post">
                    <h2 class="text-primary">Interested in this domain?</h2>
                    <hr/>
                    <div class="form-group">
                      <input type="text" name="name" id="name" class="form-control" placeholder="Full name (Required)">
                    </div>
                    <div class="row">
                      <div class="col">
                        <div class="form-group">
                          <input type="email" name="email" class="form-control" placeholder="Email (Required)">
                        </div>
                      </div>
                      <div class="col">
                        <div class="form-group">
                          <input type="text" name="phone" class="form-control" placeholder="Phone number (Required)">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <input type="number" name="price" class="form-control" min="0" placeholder="Offer price in GBP (Required)">
                    </div>
                    <div class="form-group">
                      <textarea name="comments" class="form-control" placeholder="Message (optional)"></textarea>
                    </div>
                    <!-- Single button for both validation and reCAPTCHA -->
                    <button id="submit-btn" class="btn text-white btn-lg bg-primary btn-block">Make an offer</button>
                  </form>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

How This Works #

1. When the user clicks "Make an offer", we first run $("#main-offer-form").valid() to trigger jQuery's form validation.
2. If all fields pass validation, we execute the invisible reCAPTCHA.
3. Once reCAPTCHA confirms the user is human, the onSubmit callback runs and submits the form.

This way, both checks happen in sequence, and the form only submits if both are successful.

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