Posted on 28 Mar 2018, 08:33
New
author
Hi guys,
I want to do some custom validation work (via ajax) before I will allow a lead to be submitted.
For now, as a proof of concept, I am just trying to stop the form being submitted at all. But I can’t work out how.
This is the code I am using. When you click on the button to submit the lead form, it displays the alert, but then the form is submitted anyway even though propagation of the event should have been stopped.
Please help!
Here is the code I am using:
<script>
$(document).ready(function() {
$('#lp-pom-button-17').click(function (e) {
e.preventDefault();
$('#lp-pom-form-16').submit(function() {
return false;
});
alert("hit");
return false;
});
});
Posted on 28 Mar 2018, 13:13
New
1 of 0
Hey @mattyglover!
Have you tried adding e.stopPropagation(); after e.preventDefault();? preventDefault() only removes the default functionality that was added to the on-click event, it doesn’t stop the JS from continuing to run (in this case, running the form’s POST action).
Alternatively, there’s actually a community script for adding custom validation to your forms. 👉 Check it out!
Posted on 28 Mar 2018, 21:27
New
author
2 of 0
Hey @leah.ann,
Thank you for the link to the script. I’ve implemented that and got it working pretty easily.
My complication is that I’d like to perform an AJAX query to validate a coupon prior to the form being submitted. Obviously being cross-domain that would need to occur asynchronously.
Is there a way to programmatically submit the form? I’m picturing a scenario where we stop the form submission, validate the coupon asynch, then I’d set a hidden form variable value (or some such means) on the success callback and then programmatically submit the form. On the second submission, the coupon would have been validated so we can return true on the custom validation rule.
If you can point me in the direction of being able to programmatically submit an unbounce form, I think I could wire up the rest 😃
Thanks for your help!
Matt
Posted on 29 Mar 2018, 05:17
New
3 of 0
Hi @mattyglover,
I usually strongly advise against people messing with the submit function of their Unbounce forms. You can inadvertently break things and not even realize it.
Keeping the above in mind, there are hundreds of reasons why one might need to pause their form submit. Your case with checking a coupon code is just one of many.
My agency constantly does this for clients so here is the basic overview:
Write a function that would:
- Unbind the ‘keypress’ and binds it to ‘keypress.formSubmit’ for the form (Don’t forget to account for the Enter key)
- But also unbind the “click tap touchstart” of your button and bind it to “click.formSubmit”
- Run your validation
- Don’t forget to submit the form at the end 🙂
Hope this points you in the right direction.
Best,
Hristian
Posted on 29 Mar 2018, 18:38
New
4 of 0
To supplement everything that @Hristian has said, here’s a quick script to achieve steps 2-4:
<script>
lp.jQuery().ready(function() {
// Grabs form submit button
var id=window.module.lp.form.data.formButtonId;
// Unbinds submit button on-click event
lp.jQuery("#"+id).unbind("click tap touchstart");
// Re-binds on-click event to add your own function
lp.jQuery("#"+id).bind("click tap touchstart",function(e) {
// Prevent submit
e.preventDefault();
e.stopPropagation();
/*
Your custom validation stuff
Your custom validation stuff
Your custom validation stuff
Your custom validation stuff
*/
// Submit form
lp.jQuery("form").submit();
});
});
</script>
This doesn’t account for keypress like Hristian mentioned above, just actual clicks (or mobile taps) on the submit button, but hopefully it gives you something to start working with!
Posted on 30 Mar 2018, 11:06
New
5 of 0
Your script worked for me, very thankful. I’m working on something very similar this week to validate and prevent duplicate leads. I’m grateful @mattyglover for posting the same question I was going to ask.
I’ll keep plugging away and try to post my complete script so others can imitate. Hopefully bind and unbind won’t break anything 😑
295 replies
Posted on 3 Apr 2018, 17:50
New
6 of 0
So I found this thread in the forum…I was able to add my ajax get to validate and it works 👍
@mattyglover all the script to prevent submissions is included in this thread…
[How to] Run Custom Code/Scripts on Form Submission Tips and Scripts
[tips-scripts-banner] Ever needed a reliable way to fire some JavaScript on form submission? This solution will be super handy for anybody looking to do things like: manipulating form data before it’s submitted or making custom API calls or XHR requests on form submission. Whatever custom JavaScript you may have, using this script is a reliable and easy way to ensure it is fired on form submission. Give’r a whirl! How to Install in Unbounce
![[tips-scripts-banner]](https://uploads-us-west-2.insided.com/unbounce-en/attachment/2a3877803892dbc687afc08815ede8cb54ddc68b.png){kind=link}
Click Here for Instructions
For a simple test I removed where it asks for //ADD CUSTOM CODE, the try, catch, and finally, and used this
$.get("https://api.randomuser.me", function(resp) {
console.log('validation about to happen...');
var gender = resp.results[0].gender;
if (gender === 'male') {
console.log('Validate found duplicate gender. Form not submitted. ');
} else {
gaForm(e);
lp.jQuery('.lp-pom-form form').submit();
console.log('Validate Successfull, no duplicate found. Form submitted.');
}
});
}
Posted on 22 Nov 2018, 04:35
New
7 of 0
@leah.ann Has unbounce rolled out a change in the last couple of days? As this how suddenly stopped working across all my sites, even the most basic form, which I’ve setup to test, doesnt stop the form submitting!
http://unbouncepages.com/test-validation/
lp.jQuery().ready(function() {
window.ub.page.submitButtonIds = [];
// Grabs form submit button
var id=window.module.lp.form.data.formButtonId;
// Unbinds submit button on-click event
lp.jQuery("#"+id).unbind("click tap touchstart");
// Re-binds on-click event to add your own function
lp.jQuery("#"+id).bind("click tap touchstart",function(e) {
// Prevent submit
e.preventDefault();
e.stopPropagation();
});
});