Custom Form Validation Using ZeroBounce

[Ben_Bordofsky]

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>

[SanfordWhiteman]

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

[Ben_Bordofsky]

Sure thing, here's a staging URL: 

https://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]

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/.

[Ben_Bordofsky]

Thanks for the notes Sanford. I made the changes you suggested under #1. 

Regarding #2, I've removed the async: false. It wasn't needed, at least in this version. I did try playing around with using success/complete, but I wasn't able to get it to return the values properly. Is there any other issue you see with the .done() approach without the async issue? Or perhaps a workaround I could try? 

[SanfordWhiteman]

You'll need to catch with .error() and .success() (I rehearsed this w/your XHR call and it works.)

Be careful with stuff that doesn't work in IE, too (unless you truly don't care about those visitors). Object.values doesn't work there, so good that you took it out.

[Ben_Bordofsky]

Thanks again for your assistance Sanford. 

I was able to get the success callback working, but I'm hitting the same issue as I originally posted where form.submittable(true) is not recognized in the callback function. 

Here's the latest code:

  MktoForms2.whenReady(function(form) {

	  form.onValidate(function(nativeValid) {

		if (!nativeValid) return;

		/*Create variable for email address user input*/
		 var currentValues = form.getValues();
		 var emailToTest = currentValues.Email;
		 form.submittable(false);
		
			jQuery.get({
				url: ajaxurl,
				data:{"dataType":"json","action":"sayhello","email":emailToTest},
				 success: function (resp){
					var emailObjForErrors = form.getFormElem().find("#Email");
					if (resp=="invalid"){
						alert ("form not submittable");
						form.showErrorMessage("The email you've entered is invalid. Please try again.", emailObjForErrors);
					}
					else {
						alert("form submittable");
						form.submittable(true);
					}
				}
			}); //Get function ends
		});/*onValidate ends here*/
	}); //When Ready Ends

Any idea why the success callback isn't able to set form.submittable? It seems especially odd to me that form.showErrorMessage works just fine, but form.submittable does not. 

[SanfordWhiteman]

It's not that it doesn't set form.submittable() to true — it does —  it's that it doesn't matter that you set it to true because you don't try to submit() it again.

[Ben_Bordofsky]

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.

[SanfordWhiteman · Accepted solution]

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.