Forms 2.0 onSubmit Validation Script | Community
Skip to main content
A
Anonymous
March 18, 2014
Question

Forms 2.0 onSubmit Validation Script

  • March 18, 2014
  • 14 replies
  • 5624 views
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;
 });
 
 
});

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

14 replies

A
Anonymous
March 21, 2014
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?
I
iKhripunov
Level 4
April 2, 2014
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.
A
Anonymous
April 2, 2014
I ended up removing the script alltogether and validating manually myself.

Disappointing to say the least.
I
iKhripunov
Level 4
April 2, 2014
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.
A
Anonymous
April 2, 2014
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);
BDx
BDx
Level 4
April 17, 2014
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
P
Philip_Verghes2
Level 1
June 17, 2014
Hi All,

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


A
Anonymous
June 18, 2014

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.
A
Anonymous
July 11, 2014
Hi Ian - can you update the docs please?  And add a tried & tested example that implements showErrorMessage().  Thanks
A
Anonymous
July 17, 2014
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.
Show more replies
Terms & ConditionsAccessibility statement

Loading footer...