我已将 hCaptcha 安装到我的联系表单中，它工作正常（仅在检查/验证验证码后发送电子邮件，但是如果未检查/验证验证码，我如何停止提交页面刷新，因为所有字段值都消失了，那就是对用户不利吗？有人知道我如何阻止这种情况，只需在验证码附近有一个弹出窗口/文本，让用户知道这是必需的。
谢谢！
<?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>以下是修改代码的方法：
添加一个元素来显示错误消息：
<div id="captcha-error" style="color: red;"></div>向表单元素添加 onsubmit 属性，以便在提交表单之前调用 JavaScript 函数：
<form method="post" id="contactform" name="contactform" action="/contact" onsubmit="return validateForm()">定义一个 JavaScript 函数来验证表单：
<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>通过这些更改，提交表单时将触发 JavaScript 函数 validateForm()。它检查 hCaptcha 是否已完成，如果没有，则显示错误消息并阻止提交表单。如果 hCaptcha 已完成，它将清除以前的任何错误消息并允许提交表单。
这样，当 hCaptcha 未验证时，页面将不会刷新，并且用户将在验证码附近看到一条错误消息。此外，如果出现错误，表单字段的值将保持不变。