jquery parsley ajax,jquery - reCaptcha Invisible, parsley and ajax form - Stack Overflow

本文分享了如何将Parsley.js前端验证库与谷歌的隐形reCaptcha结合使用,以增强表单的安全性和用户体验。通过提供的代码示例,可以看到在表单中应用了Parsley.js进行必填字段验证,并设置了reCaptcha的配置,使其在验证成功后触发表单提交。这个 poc 代码虽然未涉及AJAX提交,但展示了基本的交互流程和验证机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

I'll share with you how I got ParsleyJS and Invisible reCaptcha working for me. Below is the code I used. This was POC code only, not production; and I did not do an AJAX post. And please excuse any uglyness, because I had to strip out a lot of fluff:

First Name*

type="text"

id="input-first-name"

name="first-name"

data-parsley-trigger="blur"

data-parsley-error-message="First Name is required"

required>

Last Name*

type="text"

name="last-name"

id="input-last-name"

data-parsley-trigger="blur"

data-parsley-error-message="Last Name is required"

required>

Submit

function onScriptLoad() {

var htmlEl = document.querySelector('.g-recaptcha');

var captchaOptions = {

sitekey: 'Your_Site_Key',

size: 'invisible',

callback: function (token) {

$('.js-validate').submit();

console.log('test: ',token);

}

};

recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);

$('#theSubmitBtn').click(function(e){

e.preventDefault();

if(grecaptcha.getResponse() != ''){

grecaptcha.reset();

}

grecaptcha.execute();

});

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值