broken forms after upgrading from 414 to 415 - Contour

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Zac 223 posts 575 karma points

Jan 27, 2016 @ 17:37
0

Broken forms after upgrading from 4.1.4 to 4.1.5

Contour

Umbraco 7
We encountered issues with Umbraco Forms breaking after installing the update (after the warning about a security issue)

We think the issues are in umbracoforms.js.
- One is related to the event handler not being scoped to contour forms and breaking any other form on page.
- Another issue seems to be that the code checks for a class of "cancel" to tell if the form was submitted but this appears to never be set.
- When setting the input to disabled, this seems to cause the form to not submit, probably because of issues with $.validator
Edit - Turns out we broke it when updating Partials\Forms\Form.cshtml and not correctly merging in the updated submit buttons' name values from submit to submitbtn. So this was my fault and not the package. However the lack of specificity in the original code does still break non-contour forms, but you can fix that yourself by putting .contour input[type=submit] in umbracoforms.js

We replaced the code with the following in order to get it working (note this no longer shows the disabled state since it was breaking for us):
```
$('.contour [type=submit]')
    .on('click.disableButtonOnSubmit', function (evt) {
        var target = this;
        var $form = $(target.form);
        if (target.classList.contains('cancel')) return false;
        $form.validate();
        if ($form.valid()) target.classList.add('cancel');
    });
```
Original code:
```
$('input[type=submit]').not('.cancel').click(function (evt) {
        evt.preventDefault();
        var self = $(this);
        var frm = self.closest('form');
        frm.validate();
        if (frm.valid()) {
            frm.submit();
            self.attr('disabled', 'disabled');
        }
});
```
Copy Link
Ben Palmer 176 posts 842 karma points c-trib

Jan 28, 2016 @ 09:32

1

We've also run in to the exact same issue. Thanks for posting this fix, we've given it a try and it does seem to fix the issue with form submission.

We really do need a patch for this however.

Copy Link
Francielle 65 posts 279 karma points

Jan 28, 2016 @ 10:19

0

I'm having similar problems. There's also an issue with regular expressions, I had to remove them in order for my form to work.

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib

Jan 28, 2016 @ 11:32

0

@Francielle I will need to investigate issue with regular expressions. Can you provide further details or an example regular expression you are using please. So I can try to help resolve this.

Thanks,
Warren

Copy Link
Francielle 65 posts 279 karma points

Jan 28, 2016 @ 11:35

0

Hi Warren,

1) (?:(?:+?1\s(?:[.-]\s)?)?(?:(\s([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]‌)\s)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s(?:[.-]\s)?)([2-9]1[02-9]‌|[2-9][02-9]1|[2-9][02-9]{2})\s(?:[.-]\s)?([0-9]{4})(?:\s(?:#|x.?|ext.?|extension)\s(\d+))?$

2)

(?:[a-z0-9!#$%&'+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])")@(?:(?:a-z0-9?.)+a-z0-9?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-][a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib

Jan 28, 2016 @ 11:39

0

Thanks Francielle for the examples. Can you tell me what these patterns are expecting to match & do not match. As my RegEx skills are not red hot :)

Thanks,
Warren

Copy Link
Francielle 65 posts 279 karma points

Jan 28, 2016 @ 11:46

0

Hi Warren,

1 should accept things such:

1 800 5551212

800 555 1212

8005551212

18005551212

+1800 555 1212 extension65432

800 5551212 ext3333

Invalid #s

234-911-5678

314-159-2653

123-234-5678

The second one validates email addresses.

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib

Jan 28, 2016 @ 16:33
0
Hello Franielle,
I think I know what your problem is. Can you check if there is a console error in your developer tools in your browser like so:

Uncaught SyntaxError: Unexpected end of input

If so this can be easily fixed & rectified by patching this file Views/Partials/Forms/Script.cshtml on line 10 replace the double quotes with single quotes, like so.
```
<input type="hidden" id="[email protected]" value='@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Pages.SelectMany(p => p.Fieldsets).SelectMany(fs => fs.Containers).SelectMany(c => c.Fields).ToDictionary(f => f.Id, f => f.Value)))' />
```
Let me know of this helps your problem with your RegEx & Validation.

Thanks,
Warren
Copy Link
Francielle 65 posts 279 karma points

Jan 28, 2016 @ 16:35

0

Hi Warren,

I'll check this after I'm able to update Forms. Thanks for your patience and help!

Copy Link
Zac 223 posts 575 karma points

Jan 28, 2016 @ 10:23

0

Thanks for confirming it wasn't just us having a dodgy upgrade, set up an issue on the issue tracker: http://issues.umbraco.org/issue/CON-882

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib

Jan 28, 2016 @ 11:32

0

Hello Zac & all,
Thanks for highlighting this issue to us. We should be able to get a fix out later today & get the nightly build server to create a nightly build that can be used to patch the problem.

Many Thanks,
Warren

Copy Link
Zac 223 posts 575 karma points

Jan 28, 2016 @ 14:53

0

Thanks Warren. I think there's been a bit of a coincidence with some people missing, or in my case being silly and half-merging, the updated name value for the form submit inputs which changed from submit to submitbtn. No idea why this broke everything since I don't see any reference to submitbtn.

I updated the bug report to reflect this, and I think the only issue is the lack of specificity on the selector.

Copy Link
Tom Steer 161 posts 596 karma points

Jan 28, 2016 @ 11:56

0

Hey All,

Check that the name attribute on the form submit button is "submitbtn" and not "submit". Changing this on my solution seemed to do the trick.

Thanks,

Tom

Copy Link
Zac 223 posts 575 karma points

Jan 28, 2016 @ 12:23

0

Good point Tom. We do have 'submit' rather than 'submitbtn'. This looks correct in the package and I do remember seeing this change in the diffs so there must have been a mistake in committing this on our side.

We will try that out, and perhaps the only issue here is the lack of scoping breaking other forms

Edit: Yup

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib

Jan 28, 2016 @ 16:15

1

Hello Zac & Tom,
I can see that this piece of code was added in after 4.1.4 release of Forms & seems it was not fully tested.

For an immediate patch you can do as you suggest & make the target jQuery scope a lot more specific with the .contour class you have given like so: $('.contour input[type=submit]')

Alternatively as this is something new that has been introduced between the last 4.1.4 from Summer of last year, I am not 100% convinced this was fully implemented.

I need to review what we do to resolve this, as I could do with some further investigation on when this was added & to see similar commits in the repo from that timeframe from other team members to piece the jigsaw puzzle back together.

Many Thanks,
Warren

Copy Link
Preethi 32 posts 99 karma points

Jan 28, 2016 @ 12:35

0

I am having problems that I cannot edit the form

Copy Link
Per Ploug 865 posts 3491 karma points MVP admin

Jan 29, 2016 @ 10:57

0

Hi Preethi, I've replied to this in a different thread.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Broken forms after upgrading from 4.1.4 to 4.1.5