Issues with Custom Validation on Embedded Form

[Anonymous]

Hello All,

I'm using the Forms 2.0 builder for the first time and I'm running into some issues that I can't seem to resolve.

I need to enable custom validation on 2 different fields in my form, a 'password' field and a 'confirm password' field. I've gotten this working for the most part, but have run into 2 issues that I can't figure out.

1. If the form is submitted and there is a validation error, my custom message is showing up as desired. But if I then fixed the error and submit the form again, the form does not submit correctly. The page seems to reload, but nothing happens (no JavaScript error either).
2. If the form is submitted with errors on both custom fields, an error message shows up on the first of the two. If I fix the first error and submit again, no error message shows up on the 2nd custom field. Instead again, the page seems to reload and does not submit.

I was using the sample code available on this link - http://developers.marketo.com/documentation/websites/forms-2-0/ - has anyone run into a similar issue as this?  

Below is my current JavaScript for the form embed:

<script src="//app-sjn.marketo.com/js/forms2/js/forms2.js"></script>

<form id="mktoForm_1373"></form>

<script>

//var theForm = document.getElementById("mktoForm_1373");

MktoForms2.loadForm("//app-sjn.marketo.com", "729-ZYH-434", 1373, function(form){

form.onSubmit(function(){

var vals = form.getValues();

if (vals.platformPassword.length < 😎 {

form.submitable(false);

    var platformPassword = form.getFormElem().find("#platformPassword");

    form.showErrorMessage("Your password must be a minimum of 8 characters in length.", platformPassword);

} else if (vals.platformPasswordConfirm != vals.platformPassword) {

form.submitable(false);

    var platformPasswordConfirm = form.getFormElem().find("#platformPasswordConfirm");

    form.showErrorMessage("Your password confirmation does not match your password.", platformPasswordConfirm);

} else {

form.submitable(true);

}

});

});

</script>

I'm not getting a JavaScript error - it just doesn't work.

Thanks,

Ben

[Calvin_Lam]

Try adding return false; after the form.showErrorMessage() and see if that helps.

form.showErrorMessage("Your password confirmation does not match your password.", platformPasswordConfirm);
return false;

[Anonymous]

Hi Calvin,

Thanks for the idea, but adding that doesn't seem to make any difference.

It seems like after the initial submission of the form, the function attached to the 'onsubmit' never actually fires.  I added a simple alert - alert(1); - at the very beginning of the onsubmit function.  It fires the first time I submit the form with an error.  The second time I submit the form, the alert no longer fires.

Any other ideas?

Ben

[Calvin_Lam]

Ben,

Sorry for the delayed response.  I saw the case you submitted and our developer took a look at it.  Our support engineer who was assigned the case should get back to you shortly if he hasn't already.

Example number 9 on our developers site is incorrect and we should be updating that info soon.   It should be the onValidate event and not onSubmit.  Once submittable is set to false, it will not fire the onSubmit event again.

Thank you for pointing this out to us.

Calvin

[Anonymous]

Hey guys - the example 9 on the Forms 2.0 dev page mentioned above is still not updated to show onValidate over 2 months later... the only way to figure this out at the moment is to find this post!

[Anonymous]

Yeah, I noticed that too.  5 seconds of work by Marketo could save developers 5 hours of pulling their hair out.

[Anonymous]

Its been updated now - except for the comment on the line above!  It currently reads...

1. //listen for the submit event
2.   form.onValidate(function(){

[Anonymous]

(I've posted this question to other discussions, but am hoping someone here may also have conquered this issue below)

Has anyone had an issue with getting the form.showErrorMessage() to persist when users hit the ENTER key instead of the submit button?

For us, when users use the ENTER key to submit the form, the message is rendered, but quickly disappears.  If the user clicks the SUBMIT button, the error message persists until the user edits the input box (correct behavior).

Any ideas how to make the ENTER key and SUBMIT button behave the same?

We've tested this only on a Mac, but same behavior exists in Safari, Firefox and Chrome.