提问人:will 提问时间:8/29/2023 更新时间:8/29/2023 访问量:146
hCaptcha - 如果未检查/验证验证码,如何阻止页面在提交时刷新
hCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated
问:
我已经将 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>
答:
0赞
Deep Javiya
8/29/2023
#1
以下是修改代码的方法:
添加元素以显示错误消息:
<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 未验证时,页面将不会刷新,并且用户将在验证码附近看到一条错误消息。此外,如果出现错误,表单字段的值将保持不变。
评论
0赞
will
8/29/2023
谢谢,但不幸的是它不能正常工作。是的,表单字段值仍然存在,错误出现,但在选中 hcaptcha 时也会出现,我尝试提交表单,因此无论是否选中 hcaptcha 都会出现错误,因此它不允许提交表单。
评论