Re: Forms 2.0 onSubmit Validation Script

Anonymous
Not applicable
When I use the onSubmit validation code from #9 on the Forms 2.0 page  the validation works. However when I change the value in the field that I am trying to validate the form doesn't run through the onSubmit again and the form is unsubmitable. 

View code below:




MktoForms2.loadForm("//app-abk.marketo.com", "###-###-###", 89,function(form){
 
form.onSubmit(function(){
  
   var vals = form.getValues();
   
   if( vals.verify != "Verify" || vals.verify != "verify" ) {
    form.submitable(false);
var verify = form.getFormElem().find("#verify");
form.showErrorMessage("You must type the word 'Verify'", verify);
} else {
form.submitable(true);
}
 
   });
 
form.onSuccess(function(values, followUpUrl){
   form.getFormElem().fadeOut();
   return false;
 });
 
 
});

Tags (1)
14 REPLIES 14
Anonymous
Not applicable
Ben,

Yes, it looks like the documentation for the whenReady, onFormRender, and whenRendered functions got put in the wrong section of the documentation when it was copied out of our internal documentation resource onto the developer site.  I'll try to get that corrected.  They're not meant to be methods on the form object, they're the way that you get a reference to the form object from a global context when you don't have it yet.
Anonymous
Not applicable
Khripunov,

You'd basically just need to create a new HTML Snippet on your landing page and put a <script> </script> tag into it.  Then, inside the body of the script tag, for any of the examples, you'd change the first line so that instead of loading the form, it grabs the form that is already on the page when it's ready:

MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form){
becomes
MktoForms2.whenReady( function(form){
Anonymous
Not applicable
@Ian - thanks for the update - yes the example was updated the day after my post of 7/11/2014 I believe - (although the comment on line 2 still says: "//listen for the submit event" ?)

Just FYI... I think you also need a tested & working example for onFormRender method - as per this conversation with Murza - the API reference on that page claims that the method is on form - but I've discovered it only exists on MktoForms2, so that needs sorting out before it wastes anymore of anyone elses time.

Thanks
Ben
Igor_Khripunov
Level 4
Hi Ian! Thank you for solution, but what if I don't use Marketo form with "Embed Code"?
Anonymous
Not applicable
Hi Ben,

The documentation at http://developers.marketo.com/documentation/websites/forms-2-0/ was updated a while ago with a better example #9 for using the onValidate event to check if fields are valid.   The example blocks form submission if the field is invalid and shows a custom error message pointing to the field.   If the field becomes valid, it unblocks form submission.

The problem with this example previously was that it used to try to use the onSubmit event instead of onValidate, and an onSubmit function will not get called again if you've call form.submitable(false)

I've also started talking with our documentation people about figuring out how to make the examples interactive, or at least making them each have a running form that shows what output you'd expect.
Anonymous
Not applicable
Hi Ian - can you update the docs please?  And add a tried & tested example that implements showErrorMessage().  Thanks
Anonymous
Not applicable

Hi All,

The onSubmit event is not really suitable for doing validation steps, as if you've set the form to be not be submittable, it will no longer be called.   For field validation, it's much better to use the onValidate event handler instead.  This event handler will be called every time the form is validated, which will still occur if the form is not submittable. 

So for a simple validator that prevents form submission:

MktoForms2.loadForm("//my-pod-name.marketo.com", "MyMunchkinID", myFormId, function(form){
  form.onValidate(function (valid){
    if(form.getVals().MyFieldName != "mycondition"){
      form.submitable(false);
    }else{
      form.submitable(true);
   }
  });
});

You might also want to play around with the form.showErrorMessage API to display an error when your custom validator fires.

I also saw some advice in this thread about how to get the form object.   The best way to get a reference to the form object on a page (outside of the initial render callback) is to use the MktoForms2.whenReady handler.

MktoForms2.whenReady(function (form){

   form.getVals(); //do whatever you want here with the form.

});

The advantage of this method over other ways to get the form object (there are many) is that it is smart about the form lifecycle.  If the form has not yet been rendered, then your code in whenReady function will be deffered until it is rendered.   If the form has already been rendered, it will be called immediately.  This will save you from having to make sure that your form is rendered before trying to get its form object.

I'm going to work with our web publishing team to get the documentation on developer.marketo.com updated, with a better validation example and documentation on the MktoForms2.whenReady function to help avoid these same confusions in the future.
Philip_Verghes2
Level 1
Hi All,

we also facing this issue and please anyone give the correct validation script.


Brice_Dunwoodie
Level 4
Thanks for the tip on finding the form.

We've found that you have manually set the form back to submitable if you want validation to run again. This seems wrong, but that's how it's working for us.

-Brice
Anonymous
Not applicable
I used:
 
marketoForm.submitable(false);
return false;
 
conversely if I wanted to allow submission:
 
marketoForm.submitable(true);
 
where 'marketoForm' is defined as:
 
var marketoForm = MktoForms2.getForm(document.getElementsByName('formid')[0].value);
Igor_Khripunov
Level 4
How have you interrupted submit for Marketo Form 2.0 if validation is false?

form.onSubmit (function () { return false; }); doesn't work. Submit is finish whatever.
Anonymous
Not applicable
I ended up removing the script alltogether and validating manually myself.

Disappointing to say the least.
Igor_Khripunov
Level 4
It seems form.onSubmit(function(){ ... }); processed only once. After first enter/validation this event doesn't processed.

I don't understand why this is happening.
Anonymous
Not applicable
Same issue here. After initial validation the form doesn't submit.

Also, the code sample in question (#9) has errors. Ideally someone would test these before pushing them into production.

Any ideas?