Does MktoForms2 have an onFailure? Is there a way for my codebase to log if a form submit fails

[Steve_Chang]

For MktoForms2, there is an .onSuccess(callback)

but there doesn't seem to be a .onFailure(callback)

I've read through the api many times, I can't seem to figure out a way to find out if the form submit has failed.

Is there a way to do this? How do other people ensure they are aware when a form submission fails?

Thanks

[SanfordWhiteman]

https://blog.teknkl.com/adding-a-network-server-error-handler-to-marketo-forms/

[Steve_Chang]

Hi Sanford Whiteman‌, thanks so much for the blog post and the expertise.

I'm trying to implement it now. It occurred to me... is there any way to test my implementation? How would I be able to make it fail on purpose?

Question 2: "Remember, onSubmitError is for network and server errors, like a TCP/IP timeout/reset or a down server returning 404 or 500." - So, does it catch things like 'invalidInputMsg' or 'formSubmitFailedMsg'?

So far, I am unable to catch it when I intentionally try to fail by sending an incomplete form:

When I get that error, my callback isn't getting called in FormsPlus.onSubmitError(myCallback). I can see that FormsPlus is correctly defined when I console.log(FormsPlus), so it's just not being called. 

So my question is, can those errors be caught using this method (in which case I implemented it wrong). Or can they not be caught?

In addition, are there any additional thoughts you have around how to best ensure the form submits go through properly?

TL;DR:

Question 1: How do I get my request to fail on purpose to test the implementation?

Question 2: is onSubmitError suppose to be able to catch invalidInputMsg

Thanks, I appreciate it. 

[SanfordWhiteman]

Also, no need to @ - but if you do, please use the right profile! (The profile in the original response and all my posts here.)   

[jesse]

Just for other googlers in the future, this can happen when using the API to submit the form if a field has HTML tags in it. It appears that validate() doesn't catch the issue, but the server does and returns a 400 code with errorType "invalid"

[SanfordWhiteman]

How are you generating invalid input - and how is this input invalid on the server side but would not be caught by onValidate on the client?

[kimkijung]

Hi Sanford,

Longtime fan of your work here, and would like to chime-in on this issue as I am having a bit of an issue myself with this. I understand this post is older and I might be bringing it back from the dead, but I think it is relevant as this is the post that is closest to the issue I'm having.

You mentioned checking for form field input data with Marketo Forms 2.0 API, using .validate or .onValidate as needed to handle invalid input errors. I implemented this, but the problem I'm having is that the email field in Marketo seems to validate differently using form.validate() and the actual validation that occurs on the server. For example, if I try to validate "aaa@a" using form.validate(), it passes, but when submitted, it'll return a 400 for invalid email address.

Since these types of errors are harder to come across, I wanted to add an error handler on the form.submit() method so that it'll at least relay this information back to the user since relying on form.validate or validation methods from the forms 2.0 API already proved to be a little unreliable.

Any help would be greatly appreciated!

[SanfordWhiteman]

That level of validation (on the server) is new in Marketo.

In any case, you don't have to (and shouldn't) use onSubmit. You still use onValidate, but wait for the native validation to pass first.

MktoForms2.whenReady(function(mktoForm){
  mktoForm.onValidate(function(nativeValid){
    if(!nativeValid) return;

    // native validation has passed and you can now extend w/custom validation rules

  });
});

[kimkijung]

return MktoForms2.whenReady((form) => {
form.vals(this.formData);
console.log(form.validate());
if (!form.validate()) {
return;
}
// submit form if it passes Marketo validation
return form.submit();
});

Hmm, is "native validation" the one done on Marketo servers? I'm using form.validate() and using the returned boolean as a check to see if the Marketo validation is passing. The problem I'm having is that form.validate() returns true with "aaa@a" but the actual form.submit() will fail with a 400.

This could be fixed if I can match my client-side validation to use the same one from Marketo server-side validation, but the problem still exists and if it happens again, there's no elegant way to relay this information back to the user due to the missing onFailure callback. 

[SanfordWhiteman]

No, native validation is the native client-side validation. (This should be clear b/c of where it's happening, before the form is submitted.)

You can perform additional client-side validation once the native is complete. Lots of examples of this on other community posts.

Remember that arrow functions are not compatible with any version of IE. They shouldn't be used on demand gen pages.

[kimkijung]

hmm I think that still leaves me wondering why there isn't an onFail callback. Apart from form validations, this can range from rate limit errors to any unaccounted errors.

Is the solution to just add the same validations as the server-side email check and hope that it doesn't occur with any future changes? I think a lot cleaner way to do this is to add an error callback to form.submit(), but I am relatively new to Marketo and might be seeing this from the wrong angle.

In any case, thank you for your help! It was definitely informative and insightful.

[SanfordWhiteman]

Is the solution to just add the same validations as the server-side email check and hope that it doesn't occur with any future changes?

---

Yes, that's the way all  HTML forms should be built, since there's no reason to waste a server roundtrip on non-malicious end users who happen to mistype something.

[kimkijung]

I guess that makes sense for forms, but there are dozens of other use cases for a callback in case of a submit failure. Rate limits, server issues, weird validations on emails, etc. Is this something you've implemented before? Will the solution with FormsPlus module catch the 400 thrown from the mismatch in client and server validations for email as well as other common errors?

[SanfordWhiteman]

Yep, handling domain-specific exceptions (not necessarily network or HTTP errors) is the right move in general.

If client and server validation rules are different, though, that's an error in the app itself, as it shouldn't be possible for an innocent user to generate an exception (unless everything requires a roundtrip which is really old-school!).

I'm not 100% sure these new types of validation errors are caught by my onFailure extension, but will definitely check for you.

[kimkijung]

Hi Sanford,

I wanted to check in to see if you were able to test the validation error.

Thank you for your help!

[Steve_Chang]

I see I see.

That's my mistake, we just do our own client side validation. In order to get that message 'invalidInputMsg' I removed the client side validation. But, it does get caught by the onValidate(callback). I will use that.

So that answers question 2, which was an oversight of onValidate() on my part.

I'm still curious if there is a way I could test if I have implemented onSubmitError correctly? Is there a way to get it to fail on purpose?

Thanks

[SanfordWhiteman]

I'm still curious if there is a way I could test if I have implemented onSubmitError correctly? Is there a way to get it to fail on purpose?

I run my requests through a proxy that I can set to drop packets.

You could change your HOSTS file (after loading the form!) so the destination URL of the form post is unreachable, i.e.

   0.0.0.0 app-sj01.marketo.com‍