Custom Form Validation Using ZeroBounce | Community
Skip to main content
Ben_Bordofsky
Ben_Bordofsky
New Participant
February 10, 2021
Solved

Custom Form Validation Using ZeroBounce

  • February 10, 2021
  • 1 reply
  • 5275 views

Hello!

 

I'm working on integrating ZeroBounce with our Marketo forms for custom validation, but I'm running into a bit of trouble getting the form.submittable value to be set. I've included my code below. 

 

I believe that the issue is happening because I'm trying to set the form.submittable within the callback (done) function. Right now, because I set form.submittable as false outside of the AJAX call it is always false. If I try to change form.submittable to true within the AJAX call then nothing gets updated. 

 

Any ideas or suggestions on what I'm doing wrong? I'm also open to alternate approaches entirely. I was thinking about trying to trigger my validation on a different event so that I can leave the onValidate alone. 

 

<script src="mysite.com/forms2.min.js"></script> <form id="mktoForm_1234" class="mktoForm"></form> <script> MktoForms2.setOptions({ formXDPath : 'myxframepath' }); MktoForms2.loadForm("//mysite.com", "123-abc-456", 1234); MktoForms2.whenReady(function(form) { form.onValidate(function(nativeValid) { if (!nativeValid) return; /*Create variable for email address user input*/ var emailObject = form.getValues(); var emailToTest = Object.values(emailObject)[2]; var emailToTestResponseStatus="placeholder"; form.submittable(false); var jqXHR=jQuery.get(ajaxurl,{ dataType: 'json', action:'myAction', email:emailToTest, async: false }).done(function() { emailToTestResponseStatus=jqXHR.responseText; var emailObjForErrors = form.getFormElem().find("#Email"); if (emailToTestResponseStatus == "invalid"||emailToTestResponseStatus == "unknown"||emailToTestResponseStatus == "spamtrap"||emailToTestResponseStatus == "abuse"||emailToTestResponseStatus == "do_not_mail") { form.showErrorMessage("The email you've entered is invalid. Please try again.", emailObjForErrors); form.submittable(false); } else { //form.showErrorMessage("The email you've entered is valid. But did not submit...", emailObjForErrors); <!--ISSUE HERE-->form.submittable(true); } });//end Done function });/*onValidate ends here*/ }); </script>
Best answer by SanfordWhiteman

Ok, that makes sense mostly, but I've tried several things now and had no success, so perhaps I'm not really getting it. 

 

First I tried adding form.submit() after I set form.submittable(true), but that throws me into an infinite loop. I've read through the API Reference guide several times now and I don't see a way to force the form to submit without causing this loop since I'm using the onValidate method which is always called on a submit. 

 

I also tried matching my code to the Custom Error Message example here:

https://developers.marketo.com/rest-api/assets/forms/examples/ (at the bottom)

And still no luck. I'm not sure why this code works but mine doesn't. The only difference I see is that I'm setting the if/else statement within a get call. I thought the difference was that it wasn't recognizing the form.submittable(true), but you said it is seeing that, so it must be something else here that's not letting it submit as in the example above. 

 

My only other idea right now is to try triggering my validation onClick using .validate() prior to the onClick (submit) call. I'm not so sure that would work though. 

 

Any suggestions on the route I should pursue? Thank you again for your help.

 


You're close, but still not quite seeing the big picture.

 

When the validation succeeds, you need to set a variable (in the closure) and then call submit(). That submit() will call your onValidate listener again, but you check for that variable to see if the extended validation has already passed. No infinite loop.

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
February 10, 2021

Be better if you point to a page w/your actual form so I can mock up the solution, thanks.

Ben_Bordofsky
Ben_BordofskyAuthor
New Participant
February 10, 2021

Sure thing, here's a staging URL: 

test.com/request-a-demo *edited*

 

Note that the test email addresses from ZeroBounce are:

invalid@example.com

valid@example.com 

spamtrap@example.com 

etc. 

SanfordWhiteman
SanfordWhiteman
New Participant
February 10, 2021

A couple of things stand out immediately.

 

  1. JS Objects need to be treated as unordered, and of course fields can be deliberately reordered. So this is really risky:Object.values(emailObject)[2];​I don't see why you aren't doing:
    var currentValues = form.getValues(); var emailToTest = currentValues.Email;​
  2. More important, you're using a sync XHR, but in jQuery's implementation, you can't use the old done for that. You have to use success/error/complete. See the notes for async at https://api.jquery.com/Jquery.ajax/.
Terms & ConditionsAccessibility statement

Loading footer...