Recaptcha with HTML Validation

by sbhomra

HTML

<script src="https://www.google.com/recaptcha/api.js"></script>
<form id="myForm" action="/submit" method="post" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <div class="g-recaptcha" data-sitekey="your_site_key"></div>
    <button type="submit">Submit</button>
</form>

JavaScript

function validateForm() {
  // Perform HTML form validation
  var form = document.getElementById('myForm');
  if (!form.checkValidity()) {
    form.reportValidity();
    return false;
  }

  // Validate reCAPTCHA
  var recaptchaResponse = grecaptcha.getResponse();
  if (recaptchaResponse.length === 0) {
    alert('Please complete the reCAPTCHA.');
    return false;
  }

  // If validation is successful, allow form submission
  return true;
}