2

When submitting a Sitecore Forms form, we get the following Javascript exception in our console:

Uncaught TypeError: Cannot read property 'unobtrusive' of undefined
  at HTMLFormElement.eval (eval at d (jquery.unobtrusive-ajax.min.js:1), <anonymous>:3:13)
  at Object.success (jquery.unobtrusive-ajax.min.js:1)
  at l (jquery-2.1.3.min.js:14)
  at Object.fireWith [as resolveWith] (jquery-2.1.3.min.js:14)
  at p (jquery-2.1.3.min.js:14)
  at XMLHttpRequest.<anonymous> (jquery-2.1.3.min.js:14)

How can this be fixed?

4
  • 1
    Which Sitecore version? Have you tried the same on clean Sitecore instance? What is the list of js files which are loaded on your page?
    – Marek Musielak
    Feb 27, 2020 at 15:15
  • Are you using Sitecore Form Extensions by Bart Verdonck?
    – PSS
    Feb 27, 2020 at 15:17
  • SC 9.0.2 with Forms Extensions
    – Mark Lowe
    Feb 27, 2020 at 15:20
  • Was able to solve the issue, posting my solution as answer for reference.
    – Mark Lowe
    Feb 27, 2020 at 15:27

2 Answers 2

6

This can happen for multiple reasons:

A) Missing attributes on a custom field

Solution: Make sure that the @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value) attribute is present on all of your fields.

See http://madhuanbalagan.com/sitecore-9-forms-uncaught-typeerror-cannot-read-property-unobtrusive-of-undefined for details

B) jQuery is being used in noConflict mode

On successful submit, Sitecore Forms executes some JavaScript that directly targets $.validator.unobtrusive which is not defined. Instead it should be jQuery.validator.unobtrusive.

This can be fixed with a Forms.RenderForm processor:

Config:

<pipelines>
<forms.renderForm>

    <processor type="MyProject.Pipelines.Forms.RenderForm.FixJqueryReference, MyProject" resolve="true" 
               patch:after="processor[@type='Sitecore.ExperienceForms.Mvc.Pipelines.RenderForm.InitializeAjaxOptions, Sitecore.ExperienceForms.Mvc']"/>
  </forms.renderForm>
</pipelines>

Code:

public class FixJqueryReference : MvcPipelineProcessor<RenderFormEventArgs>
{
    public override void Process(RenderFormEventArgs args)
    {
        var attributes = args.Attributes["data-ajax-success"] as string;
        if (string.IsNullOrEmpty(attributes))
        {
            return;
        }

        args.Attributes["data-ajax-success"] = attributes.Replace("$.", "jQuery.");
    }
}
3
  • I followed the pipeline fix, but now instead of having $.validator is undefined I get jQuery.validator is undefined. Stange thing is that I only get this error if I changed the value in the field, but not on first submit
    – AJ -
    Mar 8, 2020 at 17:38
  • @AJ sounds like the jquery.validate.*.js can't library is not loaded correctly
    – Mark Lowe
    Mar 8, 2020 at 19:43
  • But why it would load on the first render of the form but not after I have any validation errors?
    – AJ -
    Mar 9, 2020 at 13:59
1

There can be multiple reasons for this error as described in previous comment. but if you are still facing the error, then there are chances that your Outerlayout.cshtml file having an wrong order of Forms scripts loading. You need to reference below scripts file before the RenderFormScript() method call.

 <script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery-2.1.3.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.unobtrusive-ajax.min.js"></script>

I have explained this solution here - Sitecoretricks.com

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.