SOLVED

Custom Form Validation Using ZeroBounce

Go to solution
Ben_Bordofsky
Level 2

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>
1 ACCEPTED SOLUTION
SanfordWhiteman
Level 10 - Community Moderator

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.

View solution in original post

11 REPLIES 11