SOLVED

Re: Enabling form submit again after validation errors corrected

Go to solution
Anonymous
Not applicable

Enabling form submit again after validation errors corrected

I am trying to add some custom validation to the Email and Phone fields on a form. After cobbling together a few scripts I found in the Forms 2.0 documentation and other discussions, I finally have the validation parts working. However, form submit is disabled if there is an error, and I can't figure out how to enable it again, therefore the form can't be submitted once all of the fields are correct. It can be submitted just fine if all the fields are filled out correctly from the start.

I tried putting else { form.submittable(true)} after the if statements, but then the form submits before the next check is done. I've also tried putting it outside of the form.onValidate(function() but that does not work either.

Obviously, I'm NOT well-versed in Javascript and I don't understand exactly how things are firing and how it's interacting with the baked in validation. I gather the custom validation is being processed after the regular validation is complete?

Thanks in advance for any help.

EDIT: Below is the updated code I am using.

https://codepen.io/Evangogh/pen/VjaRQV

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

<script>

MktoForms2.whenReady(function(form) {

  form.onValidate(function(builtInValid) {

    if (!builtInValid) return;

    form.submittable(true);

    var vals = form.vals();

    var invalidDomains = ["gmail.cm", "gmail.co",

        "gmail.om", "yahoo.cm", "yahoo.co", "yahoo.om",

        "hotmail.cm", "hotmail.co", "hotmail.om",

        "outlook.cm", "outlook.co", "outlook.om",

        "aol.cm", "aol.co", "aol.om"

      ],

      emailExtendedValidationError =

      'Please enter a valid email address.',

      emailField = 'Email',

      emailFieldSelector = '#' + emailField;

    var invalidDomainRE = new RegExp('@(' + invalidDomains.join(

      '|') + ')$', 'i');

    if (invalidDomainRE.test(form.vals()[emailField])) {

      form.showErrorMessage(emailExtendedValidationError,

        form.getFormElem().find(emailFieldSelector)

      );

      form.submittable(false);

    }

    var emailRegExp =

      /^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$/;

    var validEmail = emailRegExp.test(vals.Email);

    if (!validEmail) {

      form.showErrorMessage(emailExtendedValidationError,

        form.getFormElem().find(emailFieldSelector)

      );

      form.submittable(false);

    }

    var phoneRegExp =

    /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/g;

    var validPhone = phoneRegExp.test(vals.Phone);

    phoneExtendedValidationError =

      'Please enter a valid phone number.',

      phoneField = 'Phone',

      phoneFieldSelector = '#' + phoneField;

    if ((vals.Phone.length < 10) || (vals.Phone.length >

        20) || (vals.Phone == "0123456789") || (vals.Phone ==

        "1234567890") || (vals.Phone == "9876543210") ||

      (vals.Phone == "0987654321") || (!validPhone)) {

      form.submittable(false);

      var businessphone = form.getFormElem().find(

        "#Phone");

      form.showErrorMessage(

        "Please enter a valid phone number.",

        businessphone);

    }

    var invalidPhoneRE = /^\d*?(\d)\1{5,}\d*$/;

    if (invalidPhoneRE.test(form.vals()[phoneField])) {

      form.showErrorMessage(phoneExtendedValidationError,

        form.getFormElem().find(phoneFieldSelector)

      );

      form.submittable(false);

    } else {

      form.submittable(form.submittable() !== false);

    }

  });

  form.onSubmit(function(form) {

    alert("Success!");

  });

});

</script>

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Enabling form submit again after validation errors corrected

That JS could use a full rewrite... it's past unmaintainable IMO.

Anyway, I clipped out the Phone part because it's broken in its own right. While you fix that up, here's a general example of multi-step validation, reenabling the form on all-clear: http://codepen.io/figureone/pen/88dbd4001105370106aa41c0eac67ee7

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Enabling form submit again after validation errors corrected

That JS could use a full rewrite... it's past unmaintainable IMO.

Anyway, I clipped out the Phone part because it's broken in its own right. While you fix that up, here's a general example of multi-step validation, reenabling the form on all-clear: http://codepen.io/figureone/pen/88dbd4001105370106aa41c0eac67ee7

Anonymous
Not applicable

Re: Enabling form submit again after validation errors corrected

Hi Sanford -

Thank you so much.  I understand now what was going on.

I cleaned up my code as best I could. I'm sure it could further be cleaned up/optimized, but I believe I at least improved it a bit and I didn't even break it.

Regarding the phone validation, I believe I fixed it. It is intended to prevent numbers with more than 5 of the same consecutive digits and allow the following formats:

2155552527

(215) 555 2527

(215)5552527

215.555.2527

215-555-2527

1-215-555-2527

01-215-555-2527

+1 215-555-2527

+1.215.555.2527

+1-215-555-2527

+31 6 2508 3506

I'm going to update the code in my original post just to avoid future confusion.

Thanks again for all of your help!