hCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated

Question

I have installed hCaptcha into my contact form and it works fine (email is sent only after captcha is checked/validated but how do I stop the page from refreshing on submit if captcha is not checked/validated because all fields value disappear and that is bad for user? Does someone know how I can stop this and just have a popup/text near the captcha to let the user know that is required.

Thank you!

<?php
if(isset($_POST['submit'])):
    if(isset($_POST['h-captcha-response']) && !empty($_POST['h-captcha-response'])):
        // get verify response
        $data = array(
          'secret' => "code",
          'response' => $_POST['h-captcha-response']
            
          ));


        $verify = curl_init();
        curl_setopt($verify, CURLOPT_URL,   "https://hcaptcha.com/siteverify");
        curl_setopt($verify, CURLOPT_POST, true);
        curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
        curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
        $verifyResponse = curl_exec($verify);        
    $responseData = json_decode($verifyResponse);    
        if($responseData->success):
      //contact form submission code
    $email_to = "email";
    $email_subject = "title;
    $ip_address=$_SERVER['REMOTE_ADDR'];$geopluginURL='http://www.geoplugin.net/php.gp?ip='.$ip_address;$addrDetailsArr=unserialize(file_get_contents($geopluginURL));
    $country=$addrDetailsArr['geoplugin_countryName'];


     $name = $_POST['name']; // required
    $where = $_POST['where']; 
    $email_from = $_POST['email']; // required
    $message = $_POST['message']; // required
    $newsletter = $_POST['newsletter']; 
    $hcaptcha = $_POST['h-captcha']; // required
 
    $email_message = "Form details below.<br/><br/><br/>\n\n";
 
     
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
 
     
    $email_message .= "IP: ".clean_string($ip_address)."<br/><br/>\n\n";
    $email_message .= "Country: ".clean_string($country)."<br/><br/><br/>\n\n";
    $email_message .= "Name: ".clean_string($name)."<br/><br/>\n\n";
    $email_message .= "Heard from: ".clean_string($where)."<br/><br/>\n\n";
    $email_message .= "Email: ".clean_string($email_from)."<br/><br/>\n\n";
    $email_message .= "Newsletter: ".clean_string($newsletter)."<br/><br/>\n";
    $email_message .= "Message: ".clean_string($message)."<br/><br/>\n";

      // Always set content-type when sending HTML email
      $headers = "MIME-Version: 1.0" . "\r\n";
      $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
      // More headers
      $headers .= 'From:'.$name.' <'.$email.'>' . "\r\n";
      //send email
@mail($email_to, $email_subject, $email_message, $headers);
    $succMsg = header("location:/contact-thank-you");
        endif;
    endif;
endif;
?>

 <form method="post"  id="contactform" name="contactform" action="/contact">
                     <div class="textbox-1"><label for="name">Your Name *</label>
                        <input class="textbox" type="text" name="name" title="" 
                           oninvalid="this.setCustomValidity('Please Enter Your Name')"
                           oninput="setCustomValidity('')" required>
                     </div>
                     <div class="textbox-1"><label for="email">Your Email *</label>
                        <input class="textbox" type="email" name="email" title=""
                           oninvalid="this.setCustomValidity('Please Enter a Valid Email Address')"
                           oninput="setCustomValidity('')" required>
                     </div>
                     <label>How did you hear about us? (Not necessary, but we appreciate the effort.)</label>
                     <select name="where" class="dropdown" id="where" title="">
                        <option value="-">Click to Choose...</option>
                        <option value="Google Search"> Google Search </option>
                        <option value="Bing Search"> Bing Search </option>
                        <option value="Other Search Engine"> Other Search Engine </option>
                        <option value="Social Media"> Social Media </option>
                        <option value="Blog"> Blog </option>
                        <option value="Q&A Websites"> Q&A Websites </option>
                        <option value="Forum"> Forum </option>
                        <option value="Recommendation"> Recommendation </option>
                        <option value="Other"> Other </option>
                     </select>
                     <br/><br/>
                     <label for="message">Your Message *</label>
                     <textarea name="message" class="textarea" type="textarea" title="" 
                        oninvalid="this.setCustomValidity('Please Enter Your Message')"
                        oninput="setCustomValidity('')" required>
</textarea>
                     <br/><br/>
                     <label class="container">
                     <input type="checkbox"  value=""
                        oninvalid="this.setCustomValidity('Please indicate that you have read and accept our Terms of Use and Privacy Policy agreements.')"
                        oninput="setCustomValidity('')" required>
                     </input>
                     <span> I have read and accept the <a class="content-link2" href="/terms">Terms of Use</a> and <a class="content-link2" href="/privacy">Privacy Policy</a> agreements. *</span>
                     <span class="checkmark"></span>
                     </label>
                     <label class="container">
                     <input type="checkbox" name="newsletter" id="newsletter" value="yes">
                     <span>I want to receive e-mails about limited-time special offers.</span>
                     <span class="checkmark"></span>
                     </label>
                     <div class="clr"></div>
                     <br/>
                   <div class="h-captcha" data-sitekey="code" ></div>
                   
                     <div class="bot-cont"><button type="submit" name="submit" class="submit_button" value="Submit">SUBMIT MESSAGE</button></div>
                     <br/><br/>
                  </form>

Answer 1

Here's how you can modify your code:

Add an element to display an error message:

<div id="captcha-error" style="color: red;"></div>

Add an onsubmit attribute to your form element to call a JavaScript function before submitting the form:

<form method="post" id="contactform" name="contactform" action="/contact" onsubmit="return validateForm()">

Define a JavaScript function to validate the form:

<script>
function validateForm() {
    var captcha = document.querySelector('.h-captcha');

    if (!captcha.hasAttribute('data-h-captcha-response')) {
        document.getElementById('captcha-error').textContent = "Please complete the captcha.";
        return false; // Prevent form submission
    }

    var response = captcha.getAttribute('data-h-captcha-response');
    if (response === '') {
        document.getElementById('captcha-error').textContent = "Please complete the captcha.";
        return false; // Prevent form submission
    }

    document.getElementById('captcha-error').textContent = ''; // Clear any previous error
    return true; // Allow form submission
}
</script>

With these changes, the JavaScript function validateForm() will be triggered when the form is submitted. It checks if the hCaptcha has been completed, and if not, it displays an error message and prevents the form from being submitted. If the hCaptcha is completed, it clears any previous error message and allows the form to be submitted.

This way, the page won't refresh when the hCaptcha is not validated, and the user will see an error message near the captcha. Additionally, the form fields' values will remain intact in case of an error.