我的表单上有2个按钮，一个是验证码提交按钮，另一个是提交按钮，它验证javascript对表单。我想一个按钮做这两件事，但不能弄清楚。我尝试将属性从recaptcha按钮移动到其他提交按钮，但这不起作用。谷歌给了我一段代码，我把它与原始代码交叉引用，并做了一些修改
请注意:在我的代码中，它说"my-site-key"我实际上使用了我的recaptcha网站密钥
有人能帮忙吗?
代码
<!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" />
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("main-offer-form").submit();
}
</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="pt-5">
<label for="name">
<a class="btn text-white bg-green btn-lg">Buy now for $4999</a>
</label>
</div>
-->
<div class="row d-md-flex text-center justify-content-center text-primary action-icons">
<!--
<div class="col-sm-4">
<p><em class="ion-ios-telephone-outline icon-md"></em></p>
<p class="lead"><a href="tel:+[Your Phone]">+[Your Phone]</a></p>
</div>
<div class="col-sm-4">
<p><em class="ion-ios-chatbubble-outline icon-md"></em></p>
<p class="lead"><a href="mailto:email@[Your Domain].com">email@[Your Domain].com</a></p>
</div>
-->
</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>
<div class="form-group">
<button class="g-recaptcha btn text-white btn-lg bg-primary btn-block" data-sitekey="my-site-key" data-callback='onSubmit'>Submit</button>
</div>
<button type="submit" class="btn text-white btn-lg bg-primary btn-block">Make an offer</button>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$( "#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.',
matches: 'Please enter a valide phone number.',
minlength: 'Phone number should be min 10 digits.',
maxlength: 'Phone number should be max 17 digits.'
},
price: {
price: 'Please enter offered price.'
},
comments: {
maxlength: 'Message length must be less than 500 character.'
}
}
});
</script>
</body>
</html>
您需要以编程方式完成此操作。首先删除按钮上的所有data属性，这样它就不会自动添加事件侦听器。
然后更新您的onSubmit函数以手动触发recaptcha验证，如
function onSubmit(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('my-site-key', {action: 'submit'})
.then(function(token) {
// manually submit the form from here
document.getElementById("main-offer-form").submit();
});
});
}
如果遇到这样的障碍，请始终参考官方文档。