Skip to content

Instantly share code, notes, and snippets.

@DanCanetti
Last active March 15, 2021 05:20
Show Gist options
  • Save DanCanetti/25338a95d7bbc7d70d9f0ae2563c6c0d to your computer and use it in GitHub Desktop.
Save DanCanetti/25338a95d7bbc7d70d9f0ae2563c6c0d to your computer and use it in GitHub Desktop.
Inline Google Recaptcha and parsley.js form validation
.FORM_CLASS {
// Form styles
&--complete {
#submitForm {
position: relative;
&::after {
content: "";
position: absolute;
z-index: 100;
cursor: not-allowed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
}
}
<script type="text/javascript" src="your_site_path/parsley.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript" src="your_site_path/form.js"></script>
<form id="FORM_ID" class="FORM_CLASS" action="" method="post" data-parsley-validate>
<!-- form fields -->
<button id="submitForm" class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="onSubmit" data-badge="inline" type="submit">Submit</button>
</form>
jQuery(document).ready(function () {
// Check captcha and parsleyjs on submit
jQuery("#submitForm").on("click", function(token) {
$('#FORM_ID').parsley().validate();
if ($('#FORM_ID').parsley().isValid()) {
jQuery("#FORM_ID").addClass("FORM_CLASS--complete");
jQuery("#submitForm").html("Processing");
document.getElementById("FORM_ID").submit();
} else {
console.log('Not valid.');
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment